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')
}