const webpack = require('webpack')
            const path = require('path')
            // 非webpack 自带插件 需要引入后使用
            const ExtractTextPlugin = require("extract-text-webpack-plugin")

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

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

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

              module: {
                rules: [
                  {
                    // 这里必须要添加 $ 否则匹配时 可能匹配到别的代码 有可能报错
                    test: /\.(css)$/,
                    use: ExtractTextPlugin.extract({
                      // cnpm install postcss-smart-import precss autoprefixer --save-dev
                      // postcss-loader: (Autoprefixer 需要用这个插件)自动补全 CSS前缀
                      use: ['css-loader', 'postcss-loader']
                    })
                  },

                  {
                    // 这里必须要添加 $ 否则匹配时 可能匹配到别的代码 有可能报错
                    test: /\.less$/,
                    use: ExtractTextPlugin.extract({
                      // postcss-loader: 自动补全 CSS前缀 sass必须在postcss-loader前面 less不需要
                      use: ['css-loader', 'less-loader', 'postcss-loader']
                    })
                  }
                ]
              },

              plugins: [
                new webpack.optimize.CommonsChunkPlugin({
                  // 公共模块名称 有多个 使用数组
                  // 匹配entry 入口文件名 相同的单独打包 其他模块统一抽取公共代码到commons.js中
                  // css文件默认打包到一个公共CSS里 common.css
                  // 公共文件也必须在在这里打包 否则公共文件会出现在其他文件里
                  names: ['commons', 'public']
                }),

                // ExtractTextPlugin 对每个入口 chunk 都生成对应的一个文件 
                // 所以当你配置多个入口 chunk时 你必须使用 [name] [id] [contenthash]
                new ExtractTextPlugin({
                  // filename: 提取后的css名称
                  //    [name]: chunk 的文件名
                  //    [contenthash: num]: 提取文件根据内容生成的哈
                  // * 路径相对于 output里的path
                  filename: '../styles/[name].[contenthash:3].css'
                })
              ],

              watch: true
            }