webpack2动态样式文件要求

Question

I am working with webpack 2 and I want to include some style file that depends from different NODE_ENV.

I did something like this:

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


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


require(entryUrl);

But it isn't working somehow. I have got an error: Critical dependency: the request of a dependency is an expression

the console shows: stylesEntryName ====>>> main assets/styles/main.styl

Maybe I do something wrong? (in case of direct url)

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

the code working fine.

Thanks for any help.

Answer 1

webpack is emitting that warning about the line require(entryUrl) because the value of the entryUrl variable is unknown until the code is executed (ie, the require is not statically analyzable). Here's the webpack documentation about that: https://webpack.github.io/docs/context.html#critical-dependencies

You can fix this problem by removing the dynamic require, and instead use if-else statements to pick a static require statement out of the possible choices. Here's code that does that for your issue:

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