devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase:path.join(__dirname, '..', 'dist'),  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩
        // 设置代理
        proxy: {
        }
    }

 plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname, '..', 'src/index.html'),
            filename: 'index.html'
        })
    ]

  module: {
        rules: [
            {
                test: /\.js$/,
                // loader: 'babel-loader', //loader 是单个加载器，use是加载器数组
                use: [
                    'babel-loader',
                ],
                include: path.join(__dirname, '..', 'src'),
                exclude: /node_modules/
            }
        ]
    },

 // 图片 - 考虑 base64 编码的情况
{
  test: /\.(png|jpg|jpeg|gif)$/,
    use: {
      loader: 'url-loader',
        options: {
          // 小于 5kb 的图片用 base64 格式产出
          // 否则，依然延用 file-loader 的形式，产出 url 格式
          limit: 5 * 1024,
            // 打包到 img 目录下
            outputPath: '/img1/',
              // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
              // publicPath: 'http://cdn.abc.com'
        }
        }
    },

  output: {
        filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        path: distPath,
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },

new HtmlWebpackPlugin({
            template: path.join(__dirname, '..', 'src/index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
            chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(__dirname, '..', 'src/other.html'),
            filename: 'other.html',
            chunks: ['other']  // 只引用 other.js
        })

// 抽离 css
{
  test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
      'css-loader',
      'postcss-loader'
    ]
},

{
    test: /\.js$/,
    use: [
        'babel-loader?cacheDirectory',//开启转换结果缓存
    ],
    include: path.resolve(__dirname, 'src'),//只对src目录中文件采用babel-loader
    exclude: path.resolve(__dirname,' ./node_modules'),//排除node_modules目录下的文件
},

new HappyPack({
            // 用唯一ID来代表当前HappyPack是用来处理一类特定文件的，与rules中的use对应
            id: "babel",
            loaders: ["babel-loader?cacheDirectory"], //默认设置loader处理
            threads: 5, //使用共享池处理
        }),
        new HappyPack({
            id: 'styles',
            loaders: ['css-loader', 'postcss-loader'],
            threads: 5, //代表开启几个子进程去处理这一类型的文件
            verbose: true //是否允许输出日子
        }),

     {
                test: /\.(js|jsx)$/,
                use: [MiniCssExtractPlugin.loader, "HappyPack/loader?id=babel"],
                exclude: path.resolve(__dirname, " ./node_modules"),
            },
            {
                test: /\.css$/,
                use: 'happypack/loader?id=styles',
                include: path.join(__dirname, '..', 'src')
            },

 new ParallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下：
      uglifyJS: {
        output: {
          /*
           是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
           可以设置为false
          */
          beautify: false,
          /*
           是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
          */
          comments: false
        },
        compress: {
          /*
           是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
          */
          drop_console: true,
          /*
           是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换，为了达到更好的压缩效果，可以设置为false
          */
          collapse_vars: true,
          /*
           是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
           var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
          */
          reduce_vars: true
        }
      }
  }
 )

  借助自动化的手段，在监听到本地源码文件发生变化时，自动重新构建出可运行的代码后再控制浏览器刷新。Webpack将这些功能都内置了，并且提供了多种方案供我们选择。

module.export = {
  watch: true,
  watchOptions: {
    // 不监听的文件或文件夹
    ignored: /node_modules/,
    // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高  
    aggregateTimeout: 300,  
    // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
    poll: 1000
  }
}

 const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
 devServer:{
        host:'localhost',
        port:'8080',
        open:true//自动拉起浏览器
        // 只设置hot只有cssHMR生效
        hot:true,//热加载
        //hotOnly:true
    },
    plugins:[
    //热更新插件
        new webpack.HotModuleReplacementPlugin()
    ]
HotModuleReplacementPlugin生成一个mainifest（一个json结构描述了发生变化的modules列表）
和update file（一个js文件包含修改后的代码内容）

// config/webpack.common.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const commonConfig = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerPort: 8889, // 指定端口号
      openAnalyzer: false,
    }),
  ]
  // ...
}

// config/webpack.common.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
// ...
module.exports = (production) => {
  if (production) {
    const endProdConfig = merge(commonConfig, prodConfig);
    return smp.wrap(endProdConfig);
  } else {
    const endDevConfig = merge(commonConfig, devConfig);
    return smp.wrap(endDevConfig);
  }
};