无需重建即可进入生产环境

Question

我有一个在生产模式下使用 webpack 创建的包。它现在用于分期。我们正在谈论静态文件，index.html 和 bundle.js。现在我想为生产部署，而不是为生产重建另一个包，如何有效地只替换当前 STAGING 包的变量？

例如：

// bundle.js
process.env.API_PATH = "api-staging.domain.ext";
console.log(process.env.API_PATH);
// code of the whole project...

// now we want to deploy the same thing to production:
process.env.API_PATH = "api.domain.ext";
console.log(process.env.API_PATH);
// code of the whole project...

现在我只是不想为了这个小改动而重新构建。我只想更改同一个包的参数。这可能吗？如何实现？

Answer 1

除了 webpack 之外，还有用于管理环境的有效库，例如：

我建议你，用第二个选项做。

Answer 2

我解决了这个问题，而无需多次创建捆绑包。它应该只构建一次。

像这样：

创建一个名为"static"的文件夹，最好将它放在项目的根目录中。该文件夹将包含您的环境变量文件。对于每个环境，此文件将是 DIFFERENT。这意味着，如果你在本地开发，你就把本地开发配置放在那里。如果您正在准备或制作，请分别放置您的内容。

转到您的 webpack 配置并添加 copy-webpack-plugin:

// first install the plugin
npm install --save-dev copy-webpack-plugin

// then configure it on your webpack config
const CopyPlugin = require('copy-webpack-plugin');
new CopyPlugin([
  { from: 'static' },
]),

现在基本上将要发生的事情是 webpack 将构建您的包并将其放入 dist 或您定义的用于放置包的任何位置。

然后在您的 index.html 文件中，就在关闭 header 标签（不是 body 标签）之前，您输入：

<script src="env.js" charset="utf-8"></script>

因此它将在捆绑包之前加载。请记住，我们将只创建一次生产模式包。

如果你使用 Html webpack 插件，它会自动生成你的 index.html 并将其放入 dist.

现在在每个环境中都会匹配变量。

为了使 webpack 开发服务器也能正常工作，您应该使用指向静态文件夹的 contentBase：

devServer: {
    contentBase: resolvePath("static")
  },

因此 webpack 将从那里获取静态内容以在开发服务器中使用。

无需重建即可进入生产环境

Staging to Production without Rebuild

production

environment-variables

webpack