Webpack 打包后的 JS 文件压缩没生效是怎么回事？
我用 Webpack 5 搭了个项目，明明配置了 TerserPlugin 做 JS 压缩，但打包出来的 main.js 还是格式化状态，注释和空格都在，体积特别大。开发环境没问题，但 production 模式下也没压缩成功。
我检查了 mode 是 ‘production’，也手动加了 TerserPlugin，但还是不行。是不是哪里配置冲突了？这是我的部分配置：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
- 2
回答
46浏览
Webpack打包后体积太大，怎么有效压缩JS和CSS？
我们项目用的是 Webpack 5 + React，最近发现首屏加载特别慢，看了下打包后的 main.js 居然有 2.3MB（未压缩）。我已经开了 mode: 'production'，也试过用 T...
- 1
回答
45浏览
Webpack 打包时 UglifyJS 会破坏我的 CSS 吗？
我最近在用 Webpack 打包项目，配置了 uglifyjs-webpack-plugin 压缩 JS，但发现页面样式乱了。是不是这个插件误处理了 CSS？我的 CSS 写法很普通，比如： .btn...
- 1
回答
53浏览
Webpack 打包时 UglifyJS 报错怎么解决？
我用 Webpack 打包项目时，启用了 uglifyjs-webpack-plugin，结果一构建就报错，说“Unexpected token: punc (})”。我检查了 JS 代码没发现语法问...
- 2
回答
59浏览
Webpack5打包体积过大，怎么优化才能减小vendor.js？
最近项目升级到Webpack5后，发现打包出来的 vendor.js 超过2MB，首屏加载特别慢。我已经用了 SplitChunksPlugin 做了基础拆分，但效果不明显。试过把 node_modu...
- 2
回答
75浏览
Webpack DLL插件生成的manifest.json找不到，是怎么回事？
在使用Webpack的DllPlugin打包公共依赖时，虽然build成功但manifest.json没生成，导致主应用报错Cannot find module 'manifest'。检查了outpu...
- 1
回答
62浏览
Webpack 打包后 CSS 的 Source Map 为啥不生效？
我用 Webpack 打包项目时启用了 source map，JS 的能正常定位到源文件，但 CSS 始终显示的是打包后的 bundle.css，根本没法调试原始的 SCSS 文件。我在 devtoo...
- 2
回答
40浏览
Webpack打包后输出文件路径不对怎么办？
我用 Webpack 打包项目的时候，发现生成的 bundle.js 路径总是和我配置的 output.path 不一致。我在本地开发时没问题，但一构建到服务器上，引用的路径就变成根目录了，导致资源 ...
- 1
回答
57浏览
Webpack打包后怎么分析bundle里到底包含了哪些模块？
我用Webpack打包完项目，发现vendor.js特别大，想看看里面到底塞了哪些依赖，但不知道怎么生成分析报告。试过加--analyze参数，但好像没生效？ 网上说要用webpack-bundle-...
- 2
回答
43浏览
Webpack打包后Source Map不生效是怎么回事？
我用Webpack打包项目时开启了source map，但浏览器里调试还是看不到原始代码，只显示bundle.js。明明配置里写了devtool: 'source-map'，也确认生成了.map文件，...
- 2
回答
55浏览
esbuild打包后main.js内容为空，怎么排查？
刚用esbuild替换webpack打包项目，配置完发现输出的main.js文件是空的。检查过入口文件路径没问题，执行命令时也没报错，但页面完全不渲染了。尝试过加--log-level=verbose...
这个配置明确告诉 Terser 去掉 console.log 和注释。有时候默认配置可能因为某些原因失效，特别是用了第三方插件的时候。
另外记得清除一下缓存再重新打包，webpack-dev-server 的热更新有时会保留旧文件。如果还是不行，试试把 node_modules/.cache 删掉重来。
说到压缩，其实 production 模式下 webpack 自带的基础压缩已经够用了，不过加上 Terser 确实能进一步优化。唉，调试这些工具链的问题真是让人头大啊。
TerserPlugin，看起来没问题。但是有时候一些细节配置可能会导致压缩不生效。我的做法是先确认一下你的 webpack 配置文件是不是被其他地方覆盖了。确保你这个配置文件确实是生效的那个。
然后可以检查一下是否有其他插件或者 loader 在生产模式下可能干扰了压缩过程。虽然不太常见，但有时候确实会发生。
最后，你可以尝试在
TerserPlugin的配置里加上extractComments: false，确保它不会提取注释。虽然这不是压缩不生效的原因，但有时候注释会导致文件看起来像是没有压缩。修改后的配置可以试试这样：
希望这样能解决问题，如果还不行，可以再检查一下控制台输出的信息，有时候会有线索提示哪里出了问题。