webpack4配置Vue多页面入口轻量级模板

├── build                                       // webpack配置目录
│   ├── webpack.config.base.js                     // 公共配置
│   ├── webpak.config.dev.js                    // 开发模式
│   ├── webpak.config.prod.js                   // 打包模式
├── dist                                        // 项目打包路径(自动生成)
├── page                                        // 多页面入口(自定义)
├── public                                      // index.html模板
├── src                                         // 源码目录(自定义)
├── postcss.config                              // 样式添加前缀
├── pages.js                                    // 多页面配置项

git clone git@github.com:hangjob/vue-multiple-webpack4-template.git

npm install  或 yarn

npm run dev

http://localhost:3000/home.html
http://localhost:3000/login.html

npm run build
打包后生成文件dist目录

pages: [
    {
        page: 'home',
        entry: path.resolve(__dirname, './page/home.js'), //指向入口文件
        title: '这是页面1',
        template: path.resolve(__dirname, './public/index.html'), //指向模板文件
        filename: 'home.html',
        chunks: ['home','common'], // 引入公共模块common
    },
    {
        page: 'login',
        entry: path.resolve(__dirname, './page/login.js'),  //指向入口文件
        title: '这是页面2',
        template: path.resolve(__dirname, './public/index.html'), //指向模板文件
        filename: 'login.html',
        chunks: ['login'],
    }
]
• webpack.config.dev.js 开发模式
mode: 'development',
devtool: 'cheap-module-eval-source-map',// 原始代码（只有行内）,但是更高的质量和更低的性能
watch: true,
watchOptions: {
  poll: 1000, //每秒监控讯问次数
  aggregateTimeout: 500, //防抖
  ignored: '/node_modules/' //忽略监控文件 
},
devServer:{
    port: 3000,
    hot: true,
    progress: false, //记录条
    contentBase: path.resolve(__dirname, '../public'), //表示的是告诉服务器从哪里提供内容
    compress: true //开启gzip压缩
}
• webpack.config.prod.js 生产模式
ode: 'production',
devtool: 'cheap-module-source-map',// 原始代码（只有行内）每行代码从loader中进行映射
plugins: [
    new CleanWebpackPlugin(['dist'], { 
        root: path.resolve(__dirname, '..'),
        dry: false // 启用删除文件
    })
],
optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true, //启用缓存并且启用多进程并行运行
        sourceMap: true  //错误消息位置映射(减慢编译速度),线上错误方便查看
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
}
• webpack.config.base.js 公共模块
optimization: {
    splitChunks: {
        cacheGroups: {
            // 将 `node_modules`目录下被打包的代码到`common/common.js`
            common: {
                test: /node_modules/,
                chunks: "initial",  //只对入口文件处理
                name: "common", //配置公共模块名称
                minChunks: 2, //表示被引用次数，默认为1,比如在项目中有2处引用到一样的模块就会抽离到公共模块下
                maxInitialRequests: 5, // 最大的初始化加载次数，默认为1
                minSize: 0 //表示在压缩前的最小模块大小，默认为0
            }
        }
    }
}