webpack打包关于插件的坑

compression-webpack-plugin

插件文档

1. 安装使用 compression-webpack-plugin 插件对文件进行压缩

npm i compression-webpack-plugin

2. 使用

const CompressionPlugin = require('compression-webpack-plugin')
// ...
module.exports = {
	// ...
	configureWebpack: config => {
		config.plugins.push(
        // 默认使用 gzip 压缩
        new CompressionPlugin({
          algorithm: 'gzip',
          // 压缩 js/html/css 文件
          test: /\.js$|\.html$|\.css/,
          threshold: 20480,  // 超过 20480 被压缩
          deleteOriginalAssets: false // 是否删除源文件
        })
      )
	}
}

3. 打包。报错！！！！！
   默认安装的compression-webpack-plugin是7.0.1版本的。但是compression-webpack-plugin": “^7.0.0”，需要"webpack": "^5.9.0"
   文档

Cannot read property 'tapPromise' of undefined

4. 解决办法：降低版本

npm uninstall compression-webpack-plugin
npm i compression-webpack-plugin@5.0.1

uglifyjs-webpack-plugin

插件文档

1. 安装 uglifyjs-webpack-plugin 插件对js文件进行压缩

npm i uglifyjs-webpack-plugin

2. 使用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// ...
module.exports = {
	//...
	configureWebpack: config => {
		//...
		config.plugins.push(
	        new UglifyJsPlugin({
	          // UglifyJS 压缩选项
	          uglifyOptions: {
	            // 删除注释
	            output: {
	              comments: false
	            },
	            // 删除 console debugger warning
	            compress: {
	              warnings: false,
	              // 如果需要查看 console.log 打包的之前可以将这个值设置为 false
	              // drop_console: true,
	              drop_debugger: true
	            }
	          },
	          // 启用/禁用多进程并行运行。
	          parallel: true,
	          // 使用sourceMap将错误消息位置映射到模块(这会减慢编译速度)。如果您使用自己的minify函数，请阅读minify部分以正确处理sourceMap。
	          sourceMap: false
	        })
      )
	}
}

3. 打包，然后报错。。。

`warnings` is not a supported option

4. 解决办法。
   降低版本。将版本降低为 1.x即可

   npm uninstall uglifyjs-webpack-plugin
   npm i uglifyjs-webpack-plugin@1.1.1
   

   修改配置，将 compress.waring 删除，修改为使用 warningsFilter

   config.plugins.push(
           new UglifyJsPlugin({
             // UglifyJS 压缩选项
             uglifyOptions: {
               // 删除注释
               output: {
                 comments: false
               },
               // 删除 console debugger warning
               compress: {
                 // 不使用改 warnings
                 // warnings: false,
                 // 如果需要查看 console.log 打包的之前可以将这个值设置为 false
                 // drop_console: true,
                 drop_debugger: true
               }
             },
             // 启用/禁用多进程并行运行。
             parallel: true,
             // 使用sourceMap将错误消息位置映射到模块(这会减慢编译速度)。如果您使用自己的minify函数，请阅读minify部分以正确处理sourceMap。
             sourceMap: false,
             // 修改为使用 warningsFilter 去除警告
             warningsFilter: () => false
           })