小生愛

    

    
              const glob = require('glob')
              const webpack = require('webpack')
              const path = require('path')
              const fileNames = ( function (obj = {}) {
                glob.sync('app/*.js').forEach(v => {
                  let key = v.match(/([^/]+)\.js/img)
                  obj[RegExp.$1] = `./${v}`
                })
                return obj
              } )()

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

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

                entry: Object.assign(fileNames, {public: ['jquery', 'vue']}),

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

                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: /\.jsx?$/,
                      loader: 'babel-loader',
                      // exclude: babel 不打包哪些JS文件 加快打包速度
                      exclude: /node_modules/,
                      options: {
                        presets: ['es2015']
                      }
                    }
                  ]
                },

                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'
                    filename: 'styles/[name].css'
                  }),

                  // DefinePlugin: 创建一个在编译时可以配置的全局变量 一般用来区分开发模式 发布模式
                  //               这里定义的变量 编译以后就被替换 不会暴露变量名 (如果在全局变量中定义)
                  //               会暴露变量名 后期还可能覆盖这个变量名 存在风险
                  //               定义变量值 要使用 JSON.stringify
                  new webpack.DefinePlugin({
                    PRODUCTION: JSON.stringify('开发测试'),
                    ARRAY: JSON.stringify([1, 2, 3])
                  }),

                  new webpack.optimize.UglifyJsPlugin({
                    // beautify
                    //  true: 美化代码输出
                    //  false: 压缩代码 会删除部分注释 
                    beautify: false,
                    // comments
                    //  true: 保留所有注释
                    //  false: 删除所有注释
                    comments: false
                  })
                ],
                
                watch: true
              }