Webpack：如何从生产包中排除代码

Question

如何在构建时从 webpack 包中排除特定的 typescript 代码行？

例如，我在

app.ts

（nodejs应用程序）中有这行代码：

const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa';

当我使用 webpack 配置构建应用程序时，我想排除此代码。

Answer 1

在 webpack 版本 4 中，您可以在 webpack 配置中设置

mode: 'production'

。 （https://webpack.js.org/concepts/mode/）

因此，在源代码中，您可以使用以下内容：

if (process.env.NODE_ENV === 'development') {
    const thisShouldNotBeInProductionBundleJustInDevBundle = 'aaaaaaa';
    ...
}

总之，if 和 ifs 本身内的所有代码都将在构建捆绑包期间自动删除

Answer 2

Webpack 有一个

mode

设置，它允许您在开发和 生产版本之间切换。

在您的代码中，您可以使用

process.env.NODE_ENV

来了解您是否处于生产状态，Webpack 使用该属性来消除“生产死代码”：

 // declare variable everywhere to prevent unresolvable variable references
 let onlyInDev = "";

 // The following should be shaken away by webpack
 if(process.env.NODE_ENV === "development") {
   onlyInDev = "test";
 }

如果该值是不应泄露到您的生产构建的敏感信息，我会在捆绑包中搜索它，以确保在构建管道发生更改时它不会被泄露。