webpack12——打包多页应用

最新推荐文章于 2024-11-26 20:56:12 发布

原创最新推荐文章于 2024-11-26 20:56:12 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在Webpack中配置多个入口文件，包括设置不同页面的JS入口路径、定义出口路径以及使用html-webpack-plugin插件生成对应的HTML文件，确保每个页面正确加载所需的JS资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前面的章节的基础之上，首先新建一个新的项目webpack-dev2

具体配置步骤如下所示
（1）配置多个入口路径

   entry:{
       home:'./src/index.js', //首页
       other:'./src/other.js'  //其他页
   },

（2）配置对应的出口路径

  output:{
       //[name],这里的name代表home，other
       filename:'[name].js',  // 也可以加入hash，[name][hash].js
       path:Path.resolve(__dirname,'dist')
   }

（3）多个入口，对应多个html页面

//webpack.config.js
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins:[
  new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'home.html',
            chunks:['home']   //该属性用来确定该页面到底需要引入的那个js文件，这里需要引入的是home.js      
        }),
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'other.html',
           // chunks:['other']   //该属性用来确定该页面到底需要引入的那个js文件，这里需要引入的是other.js      
            chunks:['other','home']   //该属性用来确定该页面到底需要引入的那个js文件，这里需要引入的是other.js和home.js
            //这里js名称越靠前，在html文件中引入的位置越靠后
        })
]
}