Webpack 4如何配置代码压缩？如何配置底层UglifyJsPlugin实例？

当然可以实现这个需求！Webpack 4确实移除了内置的webpack.optimize.UglifyJsPlugin，转而推荐使用config.optimization.minimize，但这并不意味着你失去了对压缩插件的精细控制——你只需要手动引入独立的uglifyjs-webpack-plugin包，就能完全自定义它的配置，包括修改缓存目录。

具体步骤如下： #

1. 安装独立的UglifyJsPlugin包
   Webpack 4不再内置这个插件，所以需要单独安装：

   npm install uglifyjs-webpack-plugin --save-dev
   # 或者用yarn
   yarn add uglifyjs-webpack-plugin -D
   

2. 在Webpack配置中手动配置插件
   在你的webpack.config.js里，引入插件并通过optimization.minimizer数组注入自定义配置的实例，这样就能指定缓存目录了：

   const path = require('path');
   const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
   
   module.exports = {
     // 你的其他Webpack配置（entry、output等）
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     optimization: {
       // 若仅需覆盖默认压缩配置，可保留minimize: true；若完全自定义则可设为false
       minimize: true,
       minimizer: [
         new UglifyJsPlugin({
           // 配置缓存选项
           cache: {
             // 指定自定义缓存目录，这里用项目根目录下的.uglify-cache文件夹
             directory: path.resolve(__dirname, '.uglify-cache'),
             // 可选：缓存的唯一标识符，用于区分不同配置的缓存
             identifier: 'webpack4-uglify-v1',
             // 可选：缓存文件的命名模板
             filename: '[contenthash].json'
           },
           // 其他可选配置，比如开启多线程压缩、保留sourceMap等
           parallel: true,
           sourceMap: true
         })
       ]
     }
   };
   

关键说明： #

• 当你在optimization.minimizer中手动添加插件实例时，Webpack会使用你配置的插件代替默认的压缩工具，这样你就能完全控制所有参数。
• 默认情况下，uglifyjs-webpack-plugin的cache选项如果设为true，会使用系统临时目录；通过cache.directory就能指定你想要的自定义路径。
• 如果只是想修改默认压缩插件的缓存配置，不需要关闭minimize: true，只需要在minimizer数组里替换掉默认的插件即可。

内容的提问来源于stack exchange，提问作者csvan