Second build doesn't output CSS bundle

[nzav]

I'm using Webpack 4.2.0 and mini-css-extract-plugin to extract and bundle my CSS assets.
First build:

Hash: badd167d370d5517a181
Version: webpack 4.2.0
Time: 7179ms
Built at: 2018-3-26 08:47:58
                               Asset       Size  Chunks             Chunk Names
662ac09aa5b218926bf1ce839be78ff9.svg  868 bytes          [emitted]
                             app.css   19.9 KiB     app  [emitted]  app
                              app.js   9.35 MiB     app  [emitted]  app
                         app.css.map   25.1 KiB     app  [emitted]  app
                          app.js.map   12.5 MiB     app  [emitted]  app
                       ..\index.html   8.93 KiB          [emitted]
Entrypoint app = app.css app.js app.css.map app.js.map
[./Content/css/new-leave-management.css] 39 bytes {app} [built]
   [0] multi ./index.js 28 bytes {app} [built]
    + 567 hidden modules
Child html-webpack-plugin for "..\index.html":
     1 asset
    Entrypoint undefined = ..\index.html
       1 module
Child mini-css-extract-plugin node_modules/css-loader/index.js!Content/css/new-leave-management.css:
                                   Asset       Size  Chunks             Chunk Names
    662ac09aa5b218926bf1ce839be78ff9.svg  868 bytes          [emitted]
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js!./Content/css/new-leave-management.css] ./node_modules/css-loader!./Content/css/new-leave-management.css 21.3 KiB {mini-css-extract-plugin} [built]
        + 3 hidden modules

Second build:

Hash: 3f2b5219997bbdef01c2
Version: webpack 4.2.0
Time: 6597ms
Built at: 2018-3-26 08:52:53
        Asset      Size  Chunks             Chunk Names
       app.js  9.35 MiB     app  [emitted]  app
   app.js.map  12.5 MiB     app  [emitted]  app
..\index.html  8.87 KiB          [emitted]
Entrypoint app = app.js app.js.map
   [0] multi ./index.js 28 bytes {app} [built]
    + 567 hidden modules
Child html-webpack-plugin for "..\index.html":
     1 asset
    Entrypoint undefined = ..\index.html
       1 module

As you can see, only Javascript files are generated. The main problem is that I no longer can clean the output folder before the build.

What could be the reason?

[nzav]

Might be related: CSS file is not emitted on incremental rebuild in watch mode

[guersam]

Having the same issue with Webpack 4.4.1 + mini-css-extract-plugin 0.4.0, even though the linked issues was closed.

[nzav]

Ended up removing hard source plugin. Webpack 4 is fast in watch mode anyway.

[dtothefp]

Any updates on this issue, looks this was addressed previously for extract-text-plugin and was a significant blocker for many in the community? I imagine this will grow as more people adopt Webpack 4

#1

Also, many people aren't finding Webpack 4 faster, in fact slower on incremental builds

webpack/webpack#6767

[dtothefp]

Created minimum use case example here https://github.com/dtothefp/hard-cache-mini-css-webpack-4

[Venryx]

I'm having the same issue, with Webpack 4.6.0 and mini-css-extract-plugin 0.4.0.

Here is my project repo: https://github.com/Venryx/DebateMap
And Webpack config: https://github.com/Venryx/DebateMap/blob/master/Scripts/Build/WebpackConfig.js

Note that, in my case at least, the problem isn't that the css file isn't getting generated. Rather, it's that the css file is not getting linked into the generated html file.

In the initial build (when cache has been cleared), the <link href="..."/> line is inserted into the html file by html-webpack-plugin/mini-css-extract-plugin (not sure which of these actually adds it). The second build, however, that line is just not inserted, so the page doesn't even know about the generated css file.

[dtothefp]

@Venryx that probably has to do with the stats that are generated by Webpack, have a look there as HTML plugin would read these stats to inject the <link>. I would also guess the file is not generated as well 🤷‍♂️ .

Would be great to at least get some feedback on this issue. I've discovered that extracting CSS at all times in my dev builds took a large app that I have from a 30s rebuild to 3s. Would be good to combine with this plugin to decrease subsequent full Webpack builds

[dtothefp]

@mzgoddard any thoughts on this issue?

[mzgoddard]

@dtothefp @nzav I added mini-css-extract support last week. The support went in along with a change to exclude modules from the disk cache who cannot be fully frozen. This was mini-css-extract's issue. It added a CssDependency to webpack and hard-source didn't know how to freeze it. mini-css-extract and it's CssDependency are now supported in hard-source and any other plugins that add Dependency types like that will work too (modules with those unknown-to-hard-source dependencies will not be written to disk).

[mzgoddard]

We should be good on this issue.

[dtothefp]

thanks @mzgoddard. I'm going to add this into my project now and will report back if I come across any issues

[dtothefp]

@mzgoddard unfortunately this is now "broken" in a new way. I'm not sure of the intended use case of how CSS should update with caching but now if I save CSS and refresh the browser I will see updated CSS. But, if I quit the process and rebuild with the new CSS the styles will revert back to those at the time at the beginning of the first build.

I made a branch of my repo with updated plugin to v0.6.9 https://github.com/dtothefp/hard-cache-mini-css-webpack-4/tree/update-0.6.9

Steps to reproduce:

• yarn install
• yarn start
• go to src/main.css and change the background color
• refresh the browser and you will see the new CSS background color
• quit the Node process and run yarn start again
• open the browser and see that the CSS has reverted back to the original i.e. blue at the time of first build

I can open a new issue or you can re-open this one?

[mzgoddard]

@dtothefp I would like a new issue if you could. What you posted is already really helpful. Please post that in the issue. What you are encountering is a separate issue from this one so I'd rather have a new one.

The issue you are having sounds like a symptom some other issues have where caches are not fully saved. In your case it sounds like the md5 cache is saved but the module cache is not. Causing the effect you're seeing. I'll write more on the new issue.

[dtothefp]

@mzgoddard thanks for the reply...made a new issue here #339