const webpack = require('webpack')
        const path = require('path')

        module.exports = {
          // context: 如果不通过path.resolve 配置入口访问路径 watch: true失效
          context: path.resolve('./app1'),

          entry: {
            index: './index',
            name: './name',
            mobile: './mobile',
            public: ['jquery', 'vue']
          },

          output: {
            // filename: 编译的文件名 仅用于命名每个文件
            // [name]: 多入口形式 入口文件名替换这里的name 
            // [chunkhash]: 入口文件的hash值 用于修改后清空缓存
            filename: '[name].[chunkhash:8].js',
            // 包存放的目录
            path: path.resolve('./lx')
          },

          module: {
            rules: [
              {
                // 匹配一个正则表达式
                test: /\.css$/,
                use: [
                  {loader: 'style-loader!css-loader'},
                ]
              }
            ]
          },

          plugins: [

            /*
              CommonsChunkPlugin 插件 

                是一个可选的用于建立一个独立文件(又称作 chunk)的功能
                这个文件包括多个入口 chunk 的公共模块 通过将公共模块拆出来 最终合成的文件能够在
                最开始的时候加载一次 便存起来到缓存中供后续使用 这个带来速度上的提升 因为浏览器会
                迅速将公共的代码从缓存中取出来 而不是每次访问一个新页面时 再去加载一个更大的文件
            */


            /**
              * 方式 1. 只有一个公共文件 
            */

            /*
              // 提取 entry 公共代码
              // 比如index.js 引用了 sub.js
              // mobile.js 也引用了 sub.js
              // 这时CommonsChunkPlugin 会把它们"引用"的公共代码提取出来
              // 公共代码的名字可以随便取 如 commons
              new webpack.optimize.CommonsChunkPlugin({
                // 公共模块名称只有一个
                name: 'commons',
                // 通过 chunk name 去选择 chunks 的来源 chunk 必须是公共chunk 的子模块
                // 如果被忽略 所有的入口chunk (entry chunk) 都会被选择
                // 添加name 可以防止没改动第三方包 而改动其他文件 刷新第三方包的hash 导致页面要重新加载第三方包
                // 打包index.js name.js里的公共文件
                chunks: ['index', 'name']
              })
            */


            /**
              * 方式 2. 公共业务模块与类库或框架分开打包
              
              * 个人认为最好的打包方式: 
                  第三方类库一起打包 单独打包 可以缓存起来
                  其他业务模块单独打包抽取公共的JS 减少代码量
            */
            
            new webpack.optimize.CommonsChunkPlugin({
              // 公共模块名称 有多个 使用数组
              // 匹配entry 入口文件名 相同的单独打包 其他模块统一抽取公共代码到commons.js中
              // 公共文件必须放在这里打包 否则公共文件会在每个文件里都有
              names: ['commons', 'public']
              // 包含几个公共模块 才合并
              // minChunks: 'Infinity',
              // 通过 chunk name 去选择 chunks 的来源 chunk 必须是公共chunk 的子模块
              // 如果被忽略 所有的入口chunk (entry chunk) 都会被选择
              // 添加name 可以防止没改动第三方包 而改动其他文件 刷新第三方包的hash 导致页面要重新加载第三方包
              // 打包index.js name.js里的公共文件
              // 这里可以不写chunks 则打包所有entry中的文件
              // * 这里建议不要写chunks 如果要写把entry入口的文件都写里面 否则第三方插件会重复插入 (不知道喂猫)
              // chunks: ['index', 'name', 'public']
            })
          ],

          watch: true
        }