webpack2动态样式文件要求

Question

我正在使用webpack 2，我想包含一些样式文件，这些样式文件取决于不同的NODE_ENV。

我做了这样的事情：

const stylesEntryName = process.env.SECOND_CLIENT ? "main_for_second_client" : "main";
const entryUrl = `assets/styles/${stylesEntryName}.styl`;


console.log("stylesEntryName ====>>> ", stylesEntryName, entryUrl);


require(entryUrl);

但这不起作用。 我有一个错误： 关键依赖项：依赖项的请求是一个表达式

控制台显示： stylesEntryName ==== >>>主要资产/styles/main.styl

也许我做错了什么？ （如果是直接网址）

require('assets/styles/main.styl');

代码工作正常。

谢谢你的帮助。

Answer 1

webpack发出关于行require(entryUrl)警告，因为在执行代码之前，entryUrl变量的值是未知的（即，require不能被静态分析）。 这是关于此的webpack文档： https ://webpack.github.io/docs/context.html#critical-dependencies

您可以通过删除动态require来解决此问题，而可以使用if-else语句从可能的选择中选择一个静态require语句。 这是针对您的问题的代码：

if (process.env.SECOND_CLIENT === 'main_for_second_client') {
  require('assets/styles/main_for_second_client.styl')
} else {
  require('assets/styles/main.styl')
}