如何配置 terserplugin 不破坏类名

Question

类名在缩小过程中被破坏，但不应该这样做

我尝试按照此处 https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions 中的描述在处理时设置保留属性。不幸的是，这对我不起作用。

我在 bitbucket 上有一个包含问题的存储库，https://bitbucket.org/JohanBeumer/angular-ivy-aot/src/master/。

我注意到我犯了一个错误，没有将最新的资源提交给 bitbucket。抱歉，我更新了 repo。

我在该 repo 中使用的自定义 webpack 配置如下：


module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                    compress: false,
                    keep_fnames: true,
                    keep_classnames: true,
                    mangle: {
                        keep_fnames: true,
                        keep_classnames: true,
                        properties: {
                            reserved: ['Foo', 'BaseModel']
                        }
                    }
                }
            })
        ]
    }
};

我希望屏幕标题显示 class 的名称，即 'Foo'。

我使用以下命令构建应用程序：ng build --prod --aot

我的实际问题是，如何防止 webpack minify 破坏 classname？

感谢 Tony Ngo 的回复。我按照您的建议添加了 keep_fnames，但不幸的是，这并没有解决问题。现在我在控制台中收到以下错误：

Answer 1

只是为了完成这个问题。我最终用 Webpack 创建了一个问题，后来又用 Angular-cli.

Webpack issue

Angular-cli issue

要点是，您可以配置 terserPlugin，但 Angular 在处理时忽略该配置。

为了节省时间，不要动态地尝试获取类名，而是添加一个具有相同名称的属性并使用它。

如何配置 terserplugin 不破坏类名

How to configure terserplugin to not mangle classnames

webpack

angular

terser