webpack多页面配置 - siso

webpack多页面配置

const path = require(\'path\');
const CleanWebpackPlugin = require(\'clean-webpack-plugin\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');

module.exports = {
  entry: {
    \'index/index\': \'./src/index/index.js\',
    \'login/login\': \'./src/login/login.js\',  
  },
  output: {
    path: path.resolve(__dirname, \'dist\'),
    filename: \'[name].[chunkHash:8].js\',
    chunkFilename: "[name].bundle.js" 
  },

    plugins: [
        new CleanWebpackPlugin([\'dist\']),
        new HtmlWebpackPlugin({
            
            filename: \'index/index.html\',
            chunks: [\'common/utils\', \'common/vendor\', \'index/index\']
        }),
        
        new HtmlWebpackPlugin({
         
            filename: \'login/login.html\',
            chunks: [\'common/utils\', \'common/vendor\', \'login/login\']
        })
    ],

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {   // 抽离第三方插件
                    test: /node_modules/,   // 指定是node_modules下的第三方包
                    chunks: \'initial\',
                    name: \'common/vendor\',  // 打包后的文件名，任意命名    
                    // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                    priority: 10    
                },
                utils: { // 抽离自己写的公共代码，utils这个名字可以随意起
                    chunks: \'initial\',
                    name: \'common/utils\',  // 任意命名
                    minSize: 0    // 只要超出0字节就生成一个新包
                }
            }
        }
    },

    
};