Файл с динамическим стилем 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 ==== >>> основные активы/стили/main.styl

Может быть Я что-то не так? (в случае прямого URL)

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

код работает нормально.

Спасибо за любую помощь.

Answer 1

webpack испускает это предупреждение о строке require(entryUrl), потому что значение переменной entryUrl неизвестно до тех пор, пока код не будет выполнен (т. Е. Требование не подвергается статически анализу). Вот документация по webpack: https://webpack.github.io/docs/context.html#critical-dependencies

Вы можете исправить эту проблему, удалив динамическое требование и вместо этого используйте инструкции if-else, чтобы выбрать статический запрос запроса из возможных вариантов. Вот код, который делает это для вашей проблемы:

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