ExtractTextWebpackPlugin deprecated in WebPack v4

[medington]

Hi, I'm interested in leveraging some of the webpack configuration here but I notice that it's still using ExtractTextWebpackPlugin even though it is not recommended when using WebPack v4:

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

Can you comment on why it's not using the mini-css-extract-plugin now instead?

Otherwise, this WebPack configuration looks very nice!

Thanks,

--Mark

[mikechabot]

Thanks, good catch. I stumbled across webpack-contrib/extract-text-webpack-plugin#701 (comment) to get this working, but as you mentioned, it doesn't look recommended.

Let me fix this up, and push an update.

[mikechabot]

@medington Thanks again. I believe I've updated everything to the proper configuration, but feel free to let me know if you have any issues. Both Prod and Dev seem to be working correctly.

For good measure, since npm can be strange, you might want to rm -rf /node_modules then an npm install just to be sure all the packages are proper.

[medington]

@mikechabot Thanks for taking that on. Our Webpack config is tailored to our needs so I was just looking to see how you were doing the CSS processing in your reference implementation. Our project uses less rather than sass and we also have some raw css files (both our own and some from vendor packages) so our config processes both file types in rules. It looks like this currently:

    {
        test: /\.less$/,
        include: props.srcRoot,
        use: [
          {loader: extractCSS ? MiniCssExtractPlugin.loader : "style-loader"},
          {loader: "css-loader", options: {sourceMap: genSourceMaps}},
          {loader: "less-loader", options: {sourceMap: genSourceMaps}}
        ]
      }, {
        test: /\.css$/,
        include: [props.srcRoot, ...props.vendorStylePaths],
        use: [
          {loader: extractCSS ? MiniCssExtractPlugin.loader : "style-loader"},
          {loader: "css-loader", options: {sourceMap: genSourceMaps}}
        ],
      }

When I ported to WebPack v4 I also updated to using the DllPlugin over the CommonChunksPlugin and that's been a big win in reducing compilation times. You might consider adding something for that as well in your nice little config here.

Anyway, thanks again for taking a look at my issue and updating your project. It's a valuable resource for the community!

[mikechabot]

@medington Thanks, I agree chunking would probably be the next logical step in this configuration, I just haven't looked into it much. That said, I have seen the webpack warnings during build notifying me that the bundle is getting quite large. Thanks for the tip, I hope to be able to check it out soon.

[mikechabot]

@medington By the way, I just implemented code splitting at the react-router level. Feel free to take a look!