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); 

但它不以某種方式工作。我有一個錯誤：嚴重依賴：依賴的請求是表達

控制檯顯示：==== >>>主要資產/風格/ main.styl

也許stylesEntryName我做錯了什麼？ （在直接url的情況下）

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

代碼工作正常。

感謝您的任何幫助。

Answer 1

webpack發出關於行require(entryUrl)的警告，因爲entryUrl變量的值在執行代碼前是未知的（即require不是靜態可分析的）。下面是關於該webpack文檔：https://webpack.github.io/docs/context.html#critical-dependencies

您可以通過刪除動態要求來解決此問題，而是使用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') 
}