Separating CSS: Code not working

[stefanfrede]

After I setup my config according to how it is describe in the chapter separating CSS I relaized that the code is not working.

More specific npm run build is not separating my CSS (npm start works just fine).

This is the console output:

❯ npm run build

> webpack-boilerplate@1.0.0 build /home/stefan/Development/stefanfrede/webpack-boilerplate
> wp --mode production

⬡ webpack: Build Finished
⬡ webpack: Hash: e6132d4ab5f17fa63720
  Version: webpack 4.44.2
  Time: 387ms
  Built at: 09/24/2020 11:32:33 PM
       Asset       Size  Chunks             Chunk Names
  index.html  198 bytes          [emitted]
     main.js   15.7 KiB       0  [emitted]  main
  Entrypoint main = main.js
   [0] (webpack)-plugin-serve/lib/client/log.js 756 bytes {0} [built]
   [1] (webpack)-plugin-serve/lib/client/overlays/util.js 1.17 KiB {0} [built]
   [2] multi ./src webpack-plugin-serve/client 40 bytes {0} [built]
   [3] (webpack)-plugin-serve/client.js 1.05 KiB {0} [built]
   [4] (webpack)-plugin-serve/lib/client/client.js 3.32 KiB {0} [built]
   [5] (webpack)-plugin-serve/lib/client/ClientSocket.js 2.27 KiB {0} [built]
   [6] (webpack)-plugin-serve/lib/client/hmr.js 1.69 KiB {0} [built]
   [7] (webpack)/buildin/module.js 497 bytes {0} [built]
   [8] (webpack)-plugin-serve/lib/client/overlays/progress-minimal.js 2.38 KiB {0} [built]
   [9] (webpack)-plugin-serve/lib/client/overlays/progress.js 3.88 KiB {0} [built]
  [10] (webpack)-plugin-serve/lib/client/overlays/status.js 8.27 KiB {0} [built]
  [11] ./src/index.js + 1 modules 245 bytes {0} [built]
       | ./src/index.js 100 bytes [built]
       | ./src/component.js 145 bytes [built]
  [12] ./src/main.css 39 bytes [built]
   [] css ./node_modules/css-loader/dist/cjs.js!./src/main.css 39 bytes
  Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!src/main.css:
      Entrypoint mini-css-extract-plugin = *
      [1] ./node_modules/css-loader/dist/cjs.js!./src/main.css 321 bytes {0} [built]
          + 1 hidden module

Here is a link to my repo: https://github.com/stefanfrede/webpack-boilerplate/tree/refactor-webpack-boilerplate.

[bebraw]

I found out you have "sideEffects": false in your package.json. That's blocking mini-css-extract-plugin from working. I think I'll add a note about this to the book.

Another note, you should apply webpack-plugin-serve/client only for the development target as the entry isn't needed in production.

[stefanfrede]

👍 Thanks!

Another note, you should apply webpack-plugin-serve/client only for the development target as the entry isn't needed in production.

Please change it in Composing Configuration. I would have created a PR but got scared off by the Leanpub comments 😳

[bebraw]

@stefanfrede Yeah, will do. Thanks!