Webpack 4 does not process css files from node_modules in production mode

Bug report

DISCLAIMER: this issue is a duplicate of #8782. The original issue was closed without (as I can see) any strong reason. I asked to reopen the original issue, but, unfortunately, did not hear back. This bug is stopping us from migrating to webpack 4 from 3 (it works correctly in webpack 3). It will be great if someone can take a look.

What is the current behavior? I’m importing css files from a third party library (installed in node_modules) into my main entry point. When I run webpack in development mode, the css files are correctly processed and extracted into the separate css file. However, in production mode the css files are not processed at all.

Webpack output in development mode: As you can see it has styles.css and styles.index.js

Webpack output in production mode: As you can see it does not have styles.css and styles.index.js

If the current behavior is a bug, please provide the steps to reproduce. Please take a look at GitHub repository

The repo has two absolutely identical configs except for mode property. I’m aware that it is not recommended to use split chunks in development mode. The purpose to have dev and prod configs identical is to illustrate that only difference in mode affects which files has been processed by webpack and which not.

Run:

yarn install

yarn build
yarn build:dev

Check the output of those commands. The webpack that run in development has a css files in the output, while the one that was in production does not.

What is the expected behavior? Webpack should process css files from node_modules that are imported into entry point in development and production modes.

Other relevant information: webpack version: 4.28.4 Node.js version: 11.6.0 Operating System: macOS Mojave Additional tools: yarn 1.13.0

[sokra]

You config is correct.

Actually this is working as expected, I can tell you why. (It is a bug in blueprintjs though)

You imported the styles with import '@blueprintjs/core/lib/css/blueprint.css'; but do no use any export of them.

@blueprintjs/core has "sideEffects": false in its package.json, which means: “No module has a side effect”.

As you don’t use exports of import '@blueprintjs/core/lib/css/blueprint.css'; and it has no side-effects, webpack is allowed to drop the import while optimizing.

You can change the package.json to "sideEffects": ["*.css"],, which means: “Only .css files have side effects” and it will work correctly.

[maksimsemenov]

For future googlers: https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free