webpack 多个Entry 打包多页应用

 webpack下打包多个Html页面，可以由插件html-webpack-plugin 来完成；

另外一种插件：可以参考：web-webpack-plugin

可以看下基础篇 ：

1：webpack环境搭建；

2： webpack导入vue项目

具体做法如下：

webpack.config.js里plugin是一个数组，一个HtmlWebpackPlugin实例对应一个html页面的输出；

plugins: [
        new VueLoaderPlugin(),
        new ExtractTextPlugin({
            filename:'assest/style/[name]_[hash:8].css', //打包后的文件路径以及文件名       
        }),
       
        new HtmlWebpackPlugin({
            chunks:['datav3'],
            filename:'home.html',
            minify:{
                collapseWhitespace:false 
            },
            hash:true,
            template: './home.html'
            }),
        
        new HtmlWebpackPlugin({
            chunks:['datav2'],
            filename:'login.html',
            minify:{
                collapseWhitespace:false 
            },
            hash:true,
            template: './Login.html'
        }),
         new CleanWebpackPlugin({
            root: path.resolve(__dirname, '../dist'),   //根目录
         }),
    ]

chunks属性对应entry 中的key 值，

module.exports= {
    entry: {
        datav1:path.resolve(__dirname,"../src/main.js"),
        datav2:path.resolve(__dirname,"../src/datav2.js"),
        datav3:path.resolve(__dirname,"../src/main.js"),
    },
    output: {
        filename:'[name]_[hash:8].js',
        chunkFilename: '[id].[chunkhash].js',
        path:path.resolve(__dirname,"../dist"),
        publicPath: '/'
    },
    module:{ ... }
}

踩坑经历：注意Webpack SliptChunks对多页应用的影响：

 optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
              },
              default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
              }
            }
          },
        // runtimeChunk: {
        //     name: x => `manifest_${x.name}`,
        // }
    },

开启上面的runtimeChunk:可能导致引用名称变化，页面组件不被加载！ 

完成后的效果如下图所示：

 实际效果demo: