小生愛

    

      
                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
                } )()

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

                  entry: Object.assign(fileNames, {public: ['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: /\.jsx?$/,
                        loader: 'babel-loader',
                        options: {
                          presets: ['es2015']
                        }
                      }
                    ]
                  },

                  /**
                   *  externals : 引用外部 非本地或node_module中文件的方式 (例如引用cdn的js文件) 
                   *  jquery : 表示通过 import 或 require引用源的名字 例: import $ from 'jquery'
                   *  jQuery : 通过externals引入框架的变量
                   *  在页面里通过 <script src="不同webpack打包的外部js文件">
                      然后使用 import $ from 'jquery' 引入jq的变量 就可以使用了 (webpack 不能打包 远程文件 所以如果
                      需要使用远程文件 就使用externals方式引入
                   *  模块化开发拒绝一切 全局变量 因为任何一个页面一旦改变了全局变量的值 例: $ = 123 这时全局变量的 $ 就报错了
                   */
                  externals: {
                    jquery: 'jQuery',
                  },

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