const glob = require('glob')
            const webpack = require('webpack')
            const path = require('path')
            // glob.sync 同步加载 返回一个文件名称列表
            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',
                    options: {
                      presets: ['es2015']
                    }
                  },

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

                  /**
                    **  建议 如果不需要使用 limit时 直接用file-loader 如果需要使用limit时 可以使用url-loader  
                    *  url-loader 如果失效 将自动调用 file-loader 加在url-loader上的参数会自动传到file-loader上
                                  所以url-loader file-loader必须都添加
                    *  url-loader: 只有一个limit=sum属性 可以将小于limit的图片转成base64输出
                    *  (以下的参数 都是file-name有的 url-loader失效时自动把参数传递到file-loader上)
                    *  name: 设置文件输出路径
                        [path]: 资源相对于 url-loader的context查询参数 或者 最外层的context路径 这个必须加 否则打包拷贝图片路径不对
                        [name]: 打包图片的每个图片的名字
                        outputPath: 打包图片输出路径 本例是放在app2下面 根据需要选择是否添加
                        publicPath: 当如果在output中添加了publicPath路径不符合要求时 可以给url-loader添加私有的publicPath 这个路径将
                                    自动替换CSS文件下引用图片的地址
        
                    *  js 中加载图片方法 (真实情况 应该很少碰到这种情况 图片都是后台返回CDN地址)
                           let imgSrc = require(图片相对地址)
                           img.src = imgSrc 
                           这样可以打包自动替换JS中 各种图片的路径 
                  */
                  {
                    test: /\.(png|jpg)$/,
                    loader: 'url-loader?limit=50&name=[path][name].[ext]&context=./&outputPath=app2/&publicPath=http://localhost/build/'
                  }
                  // {
                  //   test: /\.(png|jpg)$/,
                  //   loader: 'file-loader?name=[path][name].[ext]&context=./&outputPath=app2/&publicPath=http://localhost/build/'
                  // }
                ]
              },

              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'
                })
              ],
              
              watch: true
            }

            
            下载例子