无需重建即可进入生产阶段答案

【问题标题】：Staging to Production without Rebuild无需重建即可进入生产阶段
【发布时间】：2019-07-09 06:19:37
【问题描述】：

我有一个在生产模式下使用 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...

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

【问题讨论】：

标签： webpack environment-variables production

【解决方案1】：

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

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

【讨论】：

我有使用 webpack 生成的静态文件。我知道 dotenv 和 webpack 默认环境变量。问题是我实际上并没有使用 node 或 webpack 运行代码，它们只是静态文件！这意味着我使用 webpack 生成一个包，我可以为每个环境设置 .env 文件并构建，并且包将包含我需要的所有变量。但是我需要分期和生产之间的不同变量。我不想再次重建生产它是一种浪费..
所以我需要重新构建整个项目，99.99% 相同的代码，只是为了改变从登台到生产不同的一行？在暂存中，我的静态文件指向 api-stage.domain.ext。并在生产中使用其 api.domain.ext。那么对于 6 个字母，我需要再次烧录 CPU 并再次重建一个完整的项目吗？听起来很糟糕。我只需要一种方法来替换已经定义的变量并将相同的包和 index.html 从登台部署到生产。这应该是有效的
我有同样的问题，我搜索了很多，但最好和最简单的方法是再次重建。或者您可以在文件中搜索它并随时替换为新值。

【解决方案2】：

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

这样做：

创建一个名为“static”的文件夹，最好将其放在项目的根目录中。此文件夹将包含您的环境变量文件。该文件对于每个环境不同。这意味着，如果您在本地开发人员中，则可以将本地开发人员配置放在那里。如果您在舞台或制作中，则分别放置您的内容。

转到您的 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 文件中，就在关闭标题标签（不是正文标签）之前，你把这个：

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

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

如果你使用的是 Html webpack 插件，它会自动生成你的 index.html 并放在 dist 中。

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

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

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

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

【讨论】：