我是在生产构建期间还是在准备生产时删除 webpack-dev-server 和 hot-module 中间件代码？

Posted 2023-02-22

【中文标题】我是在生产构建期间还是在准备生产时删除 webpack-dev-server 和 hot-module 中间件代码？

【英文标题】：Do I remove webpack-dev-server and hot-module middleware code during production build, or when I get ready for production?

【发布时间】：2019-10-17 12:34:34

【问题描述】：

正如标题所示，当我准备好托管生产代码时，我是否应该从服务器代码中删除所有 webpack-dev-middleware 和 webpack-hot-middleware 的用法，因为它们是 dev-dependencies？最好的设置方法是什么，所以也许我不必担心这个？

这是我的服务器代码的快照：

// webpack -> HMR
const webpack = require("webpack");
const webpackConfig = require("../webpack.config");
const compiler = webpack(webpackConfig);

// webpack HMR init
app.use(
    require("webpack-dev-middleware")(compiler, 
        noInfo: false,
        publicPath: webpackConfig.output.publicPath,
    )
);
app.use(require("webpack-hot-middleware")(compiler));

...

app.get("/", async (req, res) => 
    const initialContent = await serverRender();
    res.render("index", 
        ...initialContent,
    );
);

app.listen(port, () => 
    console.log(`Express application listening on port $port`);
);

【问题讨论】：

Angular 使用 WebPack 进行构建。在 Angular 中，您只需执行 ng build -prod，然后从 ./dist 复制您的应用程序（现在没有 WebPack 依赖项）。听起来您的项目在 NodeJS 中？看here 或here。

@paulsm4 这不是有角度的。 HMR 不仅仅与角度相关。它是网络包。到处都在使用 Webpack。

我知道。我只是提到了我使用 WebPack 的一个上下文，希望它可能对 OP 有帮助。问：你知道 OP 使用 WebPack 做什么（你假设“expressJS”，这意味着“NodeJS”）？问：OP 在他的应用程序中有硬编码的 webpack 依赖项。这些可以参数化（并因此从“生产构建”中“消除”）吗？问：对于“中间件”和“热模块加载”的其他硬编码依赖项呢？

【参考方案1】：

您应该将您的 HMR 代码（或者实际上，任何开发/环境特定设置）包装到它自己的区域中。我不建议将其从您的代码中删除，因为您可能会回到应用程序并想要更新某些内容。拥有 HMR 是一种相当不错的奢侈品，所以我会让你的代码嗅出环境，如果是开发，运行相关的代码。否则，不要运行它。

How do you detect the environment in an express.js app?

【讨论】：

像这样：if (process.env.NODE_ENV === 'production') ...HMR init code...?

如果不是生产，我想你想要。 HMR 不是生产中的用例，只是开发中的用例。