我最近升级到了 Webpack 5，不得不放弃 Uglify 以支持Terser 插件。

但是现在当我构建我的项目时，当我处于不同的模式时，我会得到不同的输出文件。

这使得链接模板中的文件并将它们加载到我的项目中变得很困难，而无需在模板中编写一些逻辑来专门选择我需要的块，找出文件名并加载它们。

如何让 Terser 在开发和生产模式下输出相同的文件名，但保持正确的分块？

当使用带有 Terser mangle 选项的 webpack 5 时。出于该项目的业务原因，我们必须在生产中启用 mangling。

debug:true为了便于举例说明问题，我将保留该选项。

在外部加载 jQuery（想想 Shopify 或我们从窗口上下文访问 jQuery 的其他环境）。

变成

我想让它变成

这发生在所有代码库中，破坏了包，我无法创建一个正常工作的包。

更新：

举例说明问题的 repo 在这里（分支名称很重要，小心！example-import-problem 是有问题的分支）：https ://github.com/vladnicula/terser-for-the-win/tree/示例导入问题

我正在尝试编译一个大型 Angular 11 Web 应用程序。此应用程序有一些由代码生成的文件。

这是一个例子......

文件：

内容：

在我的代码的其他地方，我像这样引用 A 类：

我发现我的项目的最终构建输出还包括类B，C即使它们没有在任何地方使用，这导致我的包大小急剧增加。显然，这是一个过于简化的示例，但在我的项目中，这些文件实际上包含超过 6k 行代码，但在此项目中大部分未使用。它们用于另一个共享许多相同代码的项目中。

需要明确的是，我正在使用这些相关标志运行生产构建：

我觉得我在这里缺少一些基本的东西。我需要将这些类分成不同的文件吗？如何确保这些未使用的类不包含在我的产品构建的输出中？

我有一个 Angular 库项目，我在我的主要 Angular 项目中使用（该库托管在我的私人 npm 注册表中）。当我在我的主项目中使用我的库时，我必须能够访问他的评论（函数评论、类评论、属性评论等......）。为此，我removeComments在我的库 tsconfig.json 文件中将该属性设置为 false 以保留关于构建的注释。

但是现在，我想在没有任何评论的情况下构建我的主要 Angular 项目（因为一些评论包含私人数据）。在我的 angular.json 文件中，我设置vendorChunk为 false 以将所有源保存在一个文件中（这样我只有 main.js 文件，我没有 vendor.js 文件）。

我不能使用 Angular 构建优化（optimizationangular.json 中的属性），因为我的代码中有很多反射，我必须保留类名（当我尝试将 Terser 选项 keep_classnames 设置为 true 并将 Angular 构建优化设置为 true 时，我仍然有一个运行时错误：The key hYe.e is already present in the container (existing value: class e extends hYe {constructor ()...，这就是为什么我不能使用优化）

如何删除所有评论（我不希望有库评论或主要项目评论）？

我尝试以这种方式在我的 angular.json 中使用自定义 webpack 构建器：

角.json：

额外的 webpack.config.js：

主要的项目评论如预期的那样消失了，但图书馆的评论仍然存在。

我有一种情况，我没有正确配置 Terser，这导致我的页面的压缩版本中断。我的问题是我的 index.js 中有一些功能声明。这些声明需要可以在以后加载的 Bootstrap 模式窗口中访问。

例如，在我index.js有一个这样声明的函数：

然后，假设用户在模式窗口中打开一个地址表单，并加载了一个名为“address-form.js”的不同 JavaScript 文件。在这种形式中，有一个带有 onclick 处理程序的按钮，它调用doThis(). onclick 处理程序位于“address-form.js”中，但能够doThis()在父 index.js 中访问。当 index.js 未压缩时，该按钮可以正常工作。但是在压缩之后，我得到一个错误doThis()，说不存在。

我认为这是一个范围界定问题，因为我确实在 中看到了doThis()声明index.js，但它似乎被包裹在一堆括号中。我不确定如何使 doThis() 的范围成为顶级窗口。中的数百个函数声明和变量存在相同的范围界定问题index.js，因此我正在寻找一种解决方案，我不必对庞大的文件进行太多修改。

请注意，如果我将函数声明更改为表达式，它似乎确实有效：

但是，由于文件中有数百个varsandconst和let变量（除了几十个函数声明），因此更改所有变量的范围以使压缩工作对我来说是不切实际的。

这是我的 webpack.config.js：

我正在运行的命令是：

webpack --mode=production --config webpack.config.js

解决方案

下面接受的解决方案是直接使用 terser-cli。如果有人觉得它有帮助，我编写了一个小脚本，它在目录中的每个文件上运行 terser：

这里问了一个类似的问题：Rollup is not generate typescript sourcemap

..但是关于使用 svelte 进行缩小（我不熟悉）而不是更简洁的汇总。我不确定这有多大的不同。我复制了建议的解决方案，得到了这个 rollup.config.js：

我尝试了各种源映射标志组合，例如将 TypeScript 插件sourceMap选项设置为 false，并sourcemap: true在我的输出配置中使用，但这些都没有帮助创建原始 TypeScript 的源映射。我只得到我的 TypeScript 代码的 JavaScript 化版本的映射。

并不是要减损我要问的问题，但是...

我在此过程中学到的一个有用的 Angular 技巧......

除了损坏的压缩代码之外，我无法追踪任何东西，浏览器的调试器拒绝在损坏代码的第一行以外的任何地方停止...直到我发现，默认情况下，即使在开发模式下, Angular 只为您的 Angular 项目代码提供源映射，而不是为您的任何 npm 依赖项提供源映射。

您"sourceMap"的. angular.json_ true_"vendor": true

我正在开发一个电子应用程序。我已经dotenv-webpack在 webpack 配置中添加了插件，但是当我尝试构建它时，我收到来自 Terser 的错误。此外，如果我对 TerserPlugin 配置进行评论，错误仍然会出现。

Terser 错误分配无效。

我的 Vue-CLI 项目无法创建生产版本：

我可以通过禁用 Terser 来构建它。很奇怪的是，我以前多次使用过这个项目模板，并且在这个项目中没有做任何特别不同的事情（几个略有不同的模块，但与往常一样的构建过程等）。

在这个类似的问题中，输出包含一个可用于调试的行号，但我的没有。我只知道有些东西是未定义的。

谷歌搜索建议回滚到特定的 Terser 版本，但是：

1. 我有 terser-webpack-plugin 1.2.1 和 terser 3.14.1 似乎是推荐的；和
2. 这些版本已用于数十个类似项目。

经过一些试验和错误，我现在推断出问题在于导入模块mapbox-gl-draw-circle，但我的问题仍然存在：

您如何使用 Terser 实际调查（并修复，而不是简单地解决）这样的问题？

我正在使用以下命令来构建 Angular 项目（它在 assets 文件夹下有一些凉亭组件）：

./node_modules/.bin/ng build --prod --base-href /project

在运行上述命令后，我收到以下错误：

来自 Terser 的 main-es2015.110a0182c67c95b8de43.js 中的错误错误：无法否定
AST_ClassExpression 中的语句。(/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:175355)
在 AST_ClassExpression.negate (/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min. js:1:176467)
at /node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:200508
at AST_If.optimize (/node_modules/terser-webpack-plugin/node_modules/terser/dist /bundle.min.js:1:137605)
在 ai.before (/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:137382)
在 AST_If.transform (/node_modules/terser -webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84306)
在 /node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:84470 在 l (/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1 :953)
在 e (/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1:1273)
在 kn (/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle .min.js:1:84444)

版本：

“terser”：“4.6.3”
“terser-webpack-plugin”：“3.0.3”
“webpack”：“4.39.2”
“@angular-devkit/architect”：“0.803.29”
“@angular-devkit /build-optimizer": "0.803.29"
"@angular-devkit/build-webpack": "0.803.29"
"@angular-devkit/core": "8.3.29"

我知道我们可以通过在构建命令中将优化参数设置为 false 来绕过这个，但它不会创建一个缩小的包。

关于如何解决这个问题的任何建议？

我正在尝试从我的 laravel + react 应用程序的生产版本中删除控制台日志和控制台调试。我找到了许多不同的解决方案，但似乎没有一个适合我的环境。

我仍在尝试了解整个 mix / webpack / terser 管道。

我错过了什么？

webpack.mix.js

包.json