webpack多页应用打包

场景：有两个页面 index.html, other.html
主入口文件分别为：index.js 和 other.js

第一步:在webpack.config.js文件中修改 入口entry的配置；
第二步：修改文件中出口 output 对象中filname(文件夹名称)的配置：

moudle.exports={
    enrey:{
        index:'./src/index.js', //主入口文件路径
         other:'./src/other.js', //主入口文件路径
    },
    output:{
        filename:'[name].js', // 在webpack中可以使用name，表示入口叫什么名字，输出放入出口就叫什么名字
    }
}

此时可以生成两个js入口文件
然后我们需要借助webpack的一个插件：htmlWebpackPlugin
此插件可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个htmlWebpackPlugin可以生成N个页面入口

moudle.exports={
    plugins:[
        new HtmlWebpackPlugin({
              filename: 'index.html', // 一个入口对应一个出口，生成多个页面时可以写多个newHtmlWebpackPlugin
                template: './src/index.html'
          }),
 new HtmlWebpackPlugin({
              filename: 'other.html',
               template: './src/other.html'
          })
    ]
}

完成到这一步你会发现两个页面index.html和other.html中都引入了index.js和other.js
这是因为HtmlWebpackPlugin插件不能区分html文件引入对应的js文件

HtmlWebpackPlugin插件中有一个chunks参数，里面就是设置html文件中需要的js文件

moudle.exports={
    plugins:[
        new HtmlWebpackPlugin({
              filename: 'index.html', // 一个入口对应一个出口，生成多个页面时可以写多个      newHtmlWebpackPlugin
                template: './src/index.html',
                 chunks:['index'] // index文件名对应entry入口配置的文件名称
          }),
 new HtmlWebpackPlugin({
              filename: 'other.html',
               template: './src/other.html',
                chunks:['other']
          })
    ]
}

注意事项
1、修改多入口
2、多入口无法固定一个出口，所以修改filename为[name]变量
3、使用html插件，需要手动配置多入口对应的html文件，将其指定对应的输出文件