整理webpack不同的一些配置

基本配置

1，devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配 --host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

2，optimization 属性用于优化打包行为。从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分，下面的代码即是optimize.splitChunks 中的一些配置参考

• 对引入的库代码（例如:lodash、jQuery等）进行代码的分割进行优化
• 若配置时只写chunks：“all”，其余则为默认配置
• 代码分割后的每一个js文件即为Chunk，如下图中的（main.js、vendors.js）

module.exports = {
  optimization: {
      minimize: true, // 是否使用TerserWebpackPlugin压缩打包输出的 JavaScript 文件。production模式下默认为true。
      minimizer: [
        // 自定义js优化配置，将会覆盖默认配置
        new UglifyJsPlugin({
          exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩
          cache: true,
          parallel: true, // 开启并行压缩，充分利用cpu
          sourceMap: false,
          extractComments: false, // 移除注释
          uglifyOptions: {
            compress: {
              unused: true,
              warnings: false,
              drop_debugger: true
            },
            output: {
              comments: false
            }
          }
        }),
        // 用于优化css文件
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,
          cssProcessorOptions: {
            safe: true,
            autoprefixer: { disable: true }, 
            mergeLonghand: false,
            discardComments: {
              removeAll: true // 移除注释
            }
          },
          canPrint: true
        })
      ],
      splitChunks: {
          chunks: "all", // 共有3个值"initial"，"async"和"all"。配置后，代码分割优化仅选择初始块，按需块或所有块
          minSize: 30000,   // （默认值：30000）块的最小大小
          minChunks: 1,    // （默认值：1）在拆分之前共享模块的最小块数
          maxAsyncRequests: 5,   //（默认为5）按需加载时并行请求的最大数量
          maxInitialRequests: 3,  //（默认值为3）入口点的最大并行请求数
          automaticNameDelimiter: '~',  // 默认情况下，webpack将使用块的来源和名称生成名称，例如vendors~main.js
          name: true,
          cacheGroups: {  // 以上条件都满足后会走入cacheGroups进一步进行优化的判断
              vendors: {
                  test: /[\/]node_modules[\/]/,  // 判断引入库是否是node_modules里的
                  priority: -10,   // 数字越大优先级越高 （-10大于-20）
                  filename: 'vendors.js'  // 设置代码分割后的文件名
              },
              default: {   //所有代码分割快都符合默认值，此时判断priority优先级
                  minChunks: 2,  
                  priority: -20,
                  reuseExistingChunk: true   // 允许在模块完全匹配时重用现有的块，而不是创建新的块。
              }
          }
      }
	},
}

loader

1，vue-loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。vue-loader 会解析.vue文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，module.exports 出一个 Vue.js 组件对象。2， css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样，默认生成一个数组存放存放处理后的样式字符串，并将其导出

3， style-loader的作用是把 CSS 插入到 DOM 中，就是处理css-loader导出的模块数组，然后将样式通过style标签或者其他形式插入到DOM中。

// 注 vue-style-loader 跟 style-loader 基本用法跟功能是一样的，都是往 dom 里面插入一个 style 标签去让样式生效的，但是 vue-style-loader 支持 vue 中的 ssr（服务端渲染），所以如果需要支持服务端渲染的 vue 项目，就需要用到 vue-style-loader了，如果一般的 vue 项目的话，推荐使用 style-loader，毕竟 style-loader 支持的功能还是丰富些，比如可以懒注入、可以指定位置插入标签等等。

4，scss-loader是将scss格式的样式，先帮我们转换成css格式的样式，再交给css-loader根据各个文件的依赖关系整合成一段css，最后再交给style-loader帮我们挂载到页面的header部分；

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};

5，sass-resources-loader sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。

在每个用到全局变量的组件都引入该全局样式文件,比较冗余，傻瓜，如果使用sass-resources-loader会方便很多

{
  // 引入全局样式
  loader: 'sass-resources-loader',
  options: {
    resources: [
      resolve('src/styles/_variables.scss'),
      resolve('src/styles/_mixins.scss'),
      resolve('src/styles/_functions.scss')
    ]
  }
},

6，postcss-loader它负**责进一步处理 CSS 文件，**比如添加浏览器前缀，压缩 CSS 等。 配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新建一个 postcss.config.js ，专门定义 postcss-loader 的配置

7，imports-loader是个很奇葩的东西，在webpack的架构下，假如说你写了一个js文件，然后你想写一些用jquery的代码，那么你就需要去import一个jquery的lib，而imports-loader的作用就是让你免了这个过程，让你不需要在js文件里再写这么一句话。

 假设你有 example.js 这个文件，$("img").doSomeAwesomeJqueryPluginStuff();
 然后你可以像下面这样通过配置 imports-loader 插入 $ 变量到模块中：
 require("imports-loader?$=jquery!./example.js");
 这将简单的把 var $ = require("jquery"); 前置插入到 example.js 中。

8，babel-loader这个loader主要作用是在Webpack打包的时候，用Babel将ES6的代码转换成ES5版本的。 我们选择使用@babel/preset-env这个Babel预设进行转码，所以我们也安装它。 使用到的ES6语法有两个，let变量声明语法和箭头函数语法。 火狐27.0不支持let变量声明语法，直接在该浏览器打开引用了该文件的html会报错。

安装npm i babel-loader @babel/core @babel/preset-env -D
webapck.config.js添加的babel-loader、配置.babelrc

由于Babel默认只转换新的javascript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

@babel/ployfill属于全局垫片，使用后会导出打包文件变大很多倍，会造成全局污染。
可使用@babel/runtime局部垫片解决，@babel/runtime属于按需加载，适用于开发第三方lib
npm i @babel/ployfill -D

可使用@babel/runtime局部垫片解决，@babel/runtime属于按需加载，适用于开发第三方lib
npm i @babel/runtime @babel/plugin-transform-runtime -D

在.babelrc文件中添加plugins
{
  "presets": [ ... ],
  "plugins": [
    "@babel/transform-runtime"
  ] 
}
babel polyfill有三种：
* babel-runtime
* babel-plugin-transform-runtime
* babel-polyfill
transform-runtime在使用webpack打包时需要配置到 .babelrc文件的的plugins中

"plugins": [
        ["transform-runtime", {
                "helpers": false,
                "polyfill": true,
                "regenerator": true,
                "moduleName": "babel-runtime"
        }]
]
后面的配置项不设置都将默认为true，其实可以完全像下面这样配置
"plugins": ["transform-runtime"]
babel-runtime和babel-plugin-transform-runtime的区别是使用babel-runtime时每次要转码一个api都需要手动添加
require('babel-runtime')；
而babel-plugin-transform-runtime会由工具自动添加，主要的功能是为api提供沙箱的垫片方案，不会污染全局的api
最后，babel-polyfill则是通过修改全局prototype来实现API的垫片的，因此比较适合用在单独运行的项目中。

9， svg-sprite-loader将加载的 svg 图片拼接成 雪碧图，放到页面中，其它地方通过 复用

1.首先在 src 下建立以下目录和文件
icons/svg/eye.svg
2.安装和配置 svg-sprite-loader
npm i -D svg-sprite-loader
3.在webpack配置
 	{
      test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        },
        exclude: [resolve('src/icons')]
      },
注意 url-loader 中要将 icons 文件夹排除, 不让 url-loader 处理该文件夹
4.components 中新建组件 SvgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
5.icons 下面的 index.js 写入以下内容：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
6.入口 main.js 将 index.js 引入：
import '@/icons'
7.使用（全局使用）
<svg-icon icon-class="eye"></svg-icon>
icon-class 的值是 svg 文件名

10，thread-loader

多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader
由于启动项目和打包项目都需要加速，所以配置在webpack.base.js
npm i thread-loader -D

{
  test: /\.js$/,
    use: [
      'thread-loader',
      'babel-loader'
    ],
}

11，cache-loader

缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader
由于启动项目和打包项目都需要加速，所以配置在webpack.base.js
npm i cache-loader -D

{
        test: /\.js$/,
        use: [
          'cache-loader',
          'thread-loader',
          'babel-loader'
        ],
}

plugins

1，HotModuleReplacementPlugin

webpack配置hot是否需要配置HotModuleReplacementPlugin

1，配置devServer.hot为true
2，配置webpack.HotModuleReplacementPlugin插件
3，webpack要完全启用HMR需要使用webpack.HotModuleReplacementPlugin。如果webpack或webpack-dev-server 通过命令行添加 --hot 选项启动，这个插件会自动

vue.config.js
devServer 中的 hot:true
css中的extract: true,注释掉 或者 改成false 就可以了

2，html-webpack-plugin

生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.join(__dirname, '/index.html'),
    minify: {
      // 压缩HTML文件
      removeComments: true, // 移除HTML中的注释
      collapseWhitespace: true, // 删除空白符与换行符
      minifyCSS: true, // 压缩内联css
    },
    inject: true,
  }),
]

inject 有四个选项值
true：默认值，script 标签位于 html 文件的 body 底部
body：script 标签位于 html 文件的 body 底部（同 true）
head：script 标签位于 head 标签内
false：不插入生成的 js 文件，只是单纯的生成一个 html 文件

多页应用打包
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    index: './src/index.js',
    login: './src/login.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:6].js',
  },
  //...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', //打包后的文件名
    }),
    new HtmlWebpackPlugin({
      template: './public/login.html',
      filename: 'login.html', //打包后的文件名
    }),
  ],
}

如果需要配置多个 HtmlWebpackPlugin，那么 filename 字段不可缺省，否则默认生成的都是 index.html。

但是有个问题，index.html 和 login.html 会发现，都同时引入了 index.f7d21a.js 和 login.f7d21a.js，通常这不是我们想要的，我们希望 index.html 中只引入 index.f7d21a.js，login.html 只引入 login.f7d21a.js。

HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中

odule.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', //打包后的文件名
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      template: './public/login.html',
      filename: 'login.html', //打包后的文件名
      chunks: ['login'],
    }),
  ],
}
这样执行 npm run build，可以看到 index.html 中仅引入了 index 的 js 文件，而 login.html 中也仅引入了 login 的 js 文件。

3，clean-webpack-plugin

clean-webpack-plugin 用于在打包前清理上一次项目生成的 bundle 文件，它会根据 output.path 自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, '/index.html'),
  }),
  new CleanWebpackPlugin(), // 所要清理的文件夹名称
]

4，extract-text-webpack-plugin

将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象

const ExtractTextPlugin = require('extract-text-webpack-plugin')

plugins: [
  // 将css分离到/dist文件夹下的css文件夹中的index.css
  new ExtractTextPlugin('css/index.css'),
]

5，mini-css-extract-plugin

将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap。只能用在 webpack4 中，对比另一个插件 extract-text-webpack-plugin 有以下特点:

• 异步加载
• 不重复编译，性能更好
• 更容易使用
• 只针对 CSS

这个插件应该只用在生产环境配置，并且在 loaders 链中不使用 style-loader, 而且这个插件暂时不支持 HMR

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(le|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[id].[contenthash:8].css',
    }),
  ],
}

6，purifycss-webpack

有时候我们 css 写得多了或者重复了，这就造成了多余的代码，我们希望在生产环境进行去除。

const path = require('path')
const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css

module.exports = merge(common, {
  plugins: [
    new PurifyCssWebpack({
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
  ],
})

7，optimize-css-assets-webpack-plugin

我们希望减小 css 打包后的体积，可以用到 optimize-css-assets-webpack-plugin。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码

optimization: {
  minimizer: [
    // 压缩css
    new OptimizeCSSAssetsPlugin({})
  ]

8，UglifyJsPlugin

uglifyJsPlugin 是 vue-cli 默认使用的压缩代码方式，用来对 js 文件进行压缩，从而减小 js 文件的大小，加速 load 速度。它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境将其关闭，生产环境部署时再把它打开。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: true,  //是否启用文件缓存
    parallel: true   //使用多进程并行运行来提高构建速度
  })

9，ParallelUglifyPlugin

开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，每个子进程其实还是通过 UglifyJS 去压缩代码，但是变成了并行执行。

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins: [
  new ParallelUglifyPlugin({
    //cacheDir 用于配置缓存存放的目录路径。
    cacheDir: '.cache/',
    sourceMap: true,
    uglifyJS: {
      output: {
        comments: false,
      },
      compress: {
        warnings: false,
      },
    },
  }),
]

10，terser-webpack-plugin

Webpack4.0 默认是使用 terser-webpack-plugin 这个压缩插件，在此之前是使用 uglifyjs-webpack-plugin，两者的区别是后者对 ES6 的压缩不是很好，同时我们可以开启 parallel 参数，使用多进程压缩，加快压缩。

const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码

optimization: {
  minimizer: [
    new TerserPlugin({
      parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1
      cache: true, // 是否缓存
      sourceMap: false,
    }),
  ]
}

11，NoErrorsPlugin

报错但不退出 webpack 进程。编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。

plugins: [new webpack.NoEmitOnErrorsPlugin()]

12，compression-webpack-plugin

所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。

gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。

const CompressionPlugin = require('compression-webpack-plugin')

plugins: [
  new CompressionPlugin({
    // gzip压缩配置
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, // 对超过10kb的数据进行压缩
    deleteOriginalAssets: false, // 是否删除原文件
  }),
]
当然，这个方法还需要后端配置支持。

13，DefinePlugin

我们可以通过 DefinePlugin 可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，无需作任何声明，DefinePlugin 是 webpack 自带的插件。

plugins: [
  new webpack.DefinePlugin({
    DESCRIPTION: 'This Is The Test Text.',
  }),
]

// 直接引用
console.log(DESCRIPTION)

14，ProvidePlugin

自动加载模块。 任何时候，当 identifier 被当作未赋值的变量时， module 就会自动被加载，并且 identifier 会被这个 module 输出的内容所赋值。这是 webpack 自带的插件。

module.exports = {
  resolve: {
    alias: {
      jquery: './lib/jquery',
    },
  },
  plugins: [
    //提供全局的变量，在模块中使用无需用require引入
    new webpack.ProvidePlugin({
      $: 'jquery',
      React: 'react',
    }),
  ],
}

15，HappyPack

HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。要注意的是 HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。

HappyPack 插件安装
  npm i -D happypack
webpack.base.conf.js 文件对 module.rules 进行配置
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['happypack/loader?id=babel'],
          include: [resolve('src'), resolve('test')],
          exclude: path.resolve(__dirname, 'node_modules'),
        },
        {
          test: /\.vue$/,
          use: ['happypack/loader?id=vue'],
        },
      ]
    }
在生产环境 webpack.prod.conf.js 文件进行配置
	const HappyPack = require('happypack')
    // 构造出共享进程池，在进程池中包含5个子进程
    const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
    plugins: [
      new HappyPack({
        // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
        id: 'babel',
        // 如何处理.js文件，用法和Loader配置中一样
        loaders: ['babel-loader?cacheDirectory'],
        threadPool: HappyPackThreadPool,
      }),
      new HappyPack({
        id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
        loaders: [
          {
            loader: 'vue-loader',
            options: vueLoaderConfig,
          },
        ],
        threadPool: HappyPackThreadPool,
      }),
    ]
    
注意，当项目较小时，多线程打包反而会使打包速度变慢。

16，copy-webpack-plugin

我们在 public/index.html 中引入了静态资源，但是打包的时候 webpack 并不会帮我们拷贝到 dist 目录，因此 copy-webpack-plugin 就可以很好地帮我做拷贝的工作了。

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/js/*.js',
          to: path.resolve(__dirname, 'dist', 'js'),
          flatten: true,
        },
      ],
    }),
  ],
}

17，IgnorePlugin

这是 webpack 内置插件，它的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。

比如我们要使用 moment 这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢。对此，我们可以用 IgnorePlugin 使得指定目录被忽略，从而使得打包变快，文件变小。

const Webpack = require('webpack')
plugins: [
  //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
  new Webpack.IgnorePlugin(/\.\/locale/, /moment/),
]

我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录，但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录。
import moment from 'moment'

//手动引入所需要的语言包
import 'moment/locale/zh-cn'

moment.locale('zh-cn')

let r = moment().endOf('day').fromNow()
console.log(r)

18，HardSourceWebpackPlugin

配置dllPlugin提升不明显，使用HardSourceWebpackPlugin，能让构建速度提升一大截，webpack4.xx版本可以使用该插件优化构建速度，webpack5之后的版本就已经内置了HardSourceWebpackPlugin

new HardSourceWebpackPlugin({
  cacheDirectory: 'node_modules/.cache/hard-source/[confighash]', //写入缓存的位置。默认值将缓存存储在node_modules
  configHash: function(webpackConfig) {
    return require('node-object-hash')({sort: false}).hash(webpackConfig);
  }, // 为不同的 webpack 配置构建不同的缓存
  // configHash: function() {
  //	return process.env.NODE_ENV + '-' + process.env.BABEL_ENV;
  //},
  environmentHash: {
    root: process.cwd(),
    directories: [],
    files: ['package-lock.json', 'yarn.lock'],
  },// 当加载程序、插件、其他构建时脚本或其他动态依赖项发生更改时，需要替换缓存以确保输出正确。用于确定这一点。如果哈希值与以前的版本不同，则将使用新缓存
  info: {
    mode: 'none', // 设置信息的其他默认值。NODE_ENV===“测试”时默认为“测试”。
    level: 'debug', // 要向下报告的日志消息的级别。当模式为“无”时，默认为“调试”。当模式为“测试”时，默认为“警告”。
                   例如，“调试”报告所有消息，而“警告”报告警告和错误级别消息。
  },
  cachePrune: {
    maxAge: 2 * 24 * 60 * 60 * 1000, // 超过毫秒的缓存将被视为自动删除	
    sizeThreshold: 50 * 1024 * 1024 // 要删除缓存，所有这些缓存的总和必须超过此阈值。
  },
}),

19，webpack-bundle-analyzer

是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
  ]
}
// 直接在webpack.prod.conf文件里面配置，然后npm run build

// 配置package.json 文件
{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"
  }
}