关于webpack优化的几个插件介绍

以下都是我在vue项目中使用过关于webpack的几个插件

1、hard-source-webpack-plugin

HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）

安装：npm install --save-dev hard-source-webpack-plugin

配置：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  configureWebpack: config => {
   
    if (process.env.NODE_ENV === 'production') {
   
      return {
   
        plugins: [
          new HardSourceWebpackPlugin(),
        ]
      }
    }
  },

可选配置项

new HardSourceWebpackPlugin({
   
	//忽略缓存mini-css-extract-plugin模块
  	test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
    // cacheDirectory是在高速缓存写入。默认情况下，将缓存存储在node_modules下的目录中，因此如
    // 果清除了node_modules，则缓存也是如此
    cacheDirectory:'node_modules/.cache/hard-source/[confighash]',
    // Either an absolute path or relative to webpack's options.context.
    // Sets webpack's recordsPath if not already set.
    recordsPath:'node_modules/.cache/hard-source/[confighash]/records.json',
    // configHash在启动webpack实例时转换webpack配置，并用于cacheDirectory为不同的webpack配
    // 置构建不同的缓存
    configHash: function(webpackConfig) {
   
       // node-object-hash on npm can be used to build this.
       return require