Webpack 5 如何禁用压缩逻辑仅保留代码minification功能
问题原因
你看到的IIFE包裹代码是webpack默认的模块运行时代码,和Terser压缩配置无关,你之前修改Terser参数不生效是因为没有修改webpack本身的打包行为。
解决方案
根据你的需求(仅压缩代码、无webpack运行时包裹、保留原函数结构),提供两种可行配置方案:
方案一:修改webpack原生打包配置(适用于需要保留webpack模块解析能力的场景)
修改webpack.prod.js的对应配置块:
- 修改
output配置,关闭IIFE包裹并暴露函数到全局:
output: { filename: '[name].js', path: path.resolve(__dirname, `${portalDir}dist/js`), clean: true, // 新增以下配置 iife: false, library: { type: 'global' } },
- 修改
optimization配置,精简打包产物:
optimization: { minimize: true, concatenateModules: true, // 开启作用域提升,合并模块减少冗余代码 runtimeChunk: false, // 关闭runtime代码单独提取 minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: false // 按需配置是否删除console语句 }, mangle: false, // 保留原变量、函数名,需要混淆变量可改为true,同时配置keep_fnames: true保留函数名 format: { comments: false // 移除注释 } }, extractComments: false // 不生成单独的注释文件 })], },
- (可选,webpack 5.60+版本支持)新增
experiments配置完全移除运行时代码:
experiments: { outputModule: true }, // 同时在output配置中新增:module: true
方案二:跳过webpack打包逻辑,直接复制压缩源文件(适用于不需要模块解析、仅需压缩的场景)
如果你的源文件没有import/export等模块依赖,更推荐该方案,产物完全无冗余代码:
- 先安装依赖:
npm install copy-webpack-plugin terser --save-dev - 修改
webpack.prod.js配置:
const CopyWebpackPlugin = require('copy-webpack-plugin'); const Terser = require('terser'); module.exports = { // 删掉原有的entry配置,不需要走webpack打包逻辑 entry: undefined, output: { path: path.resolve(__dirname, `${portalDir}dist/js`), clean: true }, plugins: [ new CopyWebpackPlugin({ patterns: [ { from: `${portalDir}assets/js/*.js`, to: '[name].js', transform: (content) => { // 直接用Terser压缩源文件 return Terser.minify(content.toString(), { compress: true, mangle: false }).code; } } ] }) ], // 其他原有配置(externals、performance等)可以保留或删除,不影响当前逻辑 }
内容的提问来源于stack exchange,提问作者Abel Olguin Chavez
相关产品推荐
相关产品推荐

