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”的文件夹，最好将其放置在项目的根目录中。该文件夹将包含您的环境变量文件。对于每个环境，该文件将不同。那意味着，如果您在本地开发人员上，则将本地开发人员配置放在那里。如果您要进行舞台演出或制作，则分别放置内容。

转到您的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将从那里获取静态内容，以便在开发服务器中使用。

无需重新生产即可过渡到生产

2 个答案: