0

我正在开发 reactjs 应用程序并使用 webpack 捆绑应用程序。

这就是我在 index.html 文件中设置 css 文件路径的方式。

  <link rel="stylesheet" href="/styles.css" media="screen" charset="utf-8">

当我在npm run dev本地运行命令时，系统会在端口 8080 上运行一个 Web 服务器，我可以访问该应用程序。这一切都很好。

当我在不同的环境中部署应用程序时，由于某些策略，我们需要将应用程序托管在子文件夹下。

这意味着在应用程序中使用相对路径的任何资源都需要了解此更改。

假设子文件夹名称是TEST. 在这种情况下，在本地可以作为http://localhost:8080/abc.png使用的资源现在可以作为http://localhost:8080/TEST/abc.png使用。

我不确定处理这种情况的最佳方法是什么。我在想的是我将创建一个全局变量调用 window_context，每个使用相对路径的资源都将使用这个变量。

所以不包括styles.css我将使用

<link rel="stylesheet" href="{window_context}/styles.css" media="screen" charset="utf-8">

如果我在本地运行应用程序，则变量将为空，如果我使用 webpack 创建包，我将设置 window_context = '/TEST'.

如何使用 webpack 访问变量并根据我正在运行的命令为其分配一个值。

因此，如果我说npm run dev（在本地运行应用程序并启动 Web 服务器）window_context 应该设置为“”，如果我运行npm run build（创建一个包），它应该将 window_context 设置为“/TEST”

4

1 回答 1

2

output.publicPath应该是正确的选择，是的。如果您希望它从一个环境更改为另一个环境，您应该为这两个环境进行单独的构建。如果你的webpack.config.js文件导出了一组配置对象而不是一个，webpack 会自动为每个对象进行构建。因此，您可以拥有两个（或更多）构建配置的数组，其中每个都有不同的publicPath.

[编辑]：这是一个非常简单的 webpack.config.js 示例：

var buildConfigs = [];
module.exports = buildConfigs;

var envs = ['dev', 'production'];
envs.forEach(function(env) {
  var conf = {};
  conf.entry = './entry.js';
  conf.output = {};
  if (env === 'production') {
    conf.output.publicPath = '/DW';
  } else {
    conf.output.publicPath = '/';
  }

  buildConfigs.push(conf);
});

这会导出一个数组，其中所有配置在两个构建之间共享，除了publicPath. 您的真实构建配置当然会更大，但您可以通过将配置的各个部分分别定义为变量，甚至在您require从该文件中定义的单独模块中来保持它的清洁。

于 2016-03-02T21:34:38.373 回答