Webpack 4 Generates Empty CSS Vendors Bundle

[l0gicgate]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
Empty CSS Vendors Bundle Being Generated

If the current behavior is a bug, please provide the steps to reproduce.
My config is outputting 2 bundles for both JS and CSS. I want to output one vendors.js and one bundle.js and once bundle.css file. Somehow it is creating an empty vendors.css file. I tried using removeEmptyChunks (which is enabled by default) but it doesn't do anything. It'll still emit an empty chunk:

Here is the config:

{
  splitChunks: {
    cacheGroups: {
      default: {
        chunks: 'initial',
        name: 'bundle',
        priority: -20,
        reuseExistingChunk: true,
      },
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        priority: -10,
        test: /node_modules\/(.*)\.js/
      }
    }
  }
}

What is the expected behavior?
Generate 1 bundle for all CSS which is what was happening with the CommonsChunkPlugin and generate 2 bundles for JS, 1 cacheable vendor bundle and 1 commons bundle for everything else plus async route bundles.

If this is a feature request, what is motivation or use case for changing the behavior?
N/A

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
Node 9.7.1, Webpack 4.1.1

The issue is replicated in this repository
https://github.com/l0gicgate/webpack-issue-6703

[sokra]

Thanks for your report. It would be great if you reduce your issue to a small reproducible example. Best put this example into a github repository together with instructions how to get to the problem.

[l0gicgate]

@sokra will do. I will update the issue once I put the repo together.

Thanks

[AlexandrMardanov]

I think this issue could be the problem.
mini-css-extract-plugin fixes empty css, but you can't use [chunkhash] with it :(

[l0gicgate]

@sokra I added the repository here to replicate the issue https://github.com/l0gicgate/webpack-issue-6703

I tried to replicate the current setup I have and remove as many dependencies as possible that weren't necessary

[shinygang]

@sokra Question:How can I chunk without css?
my code:

optimization: {
  runtimeChunk: false,
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    minChunks: 3,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: true,
    cacheGroups: {
      commons: {
      name: 'commons',
      chunks: 'all',
      minChunks: 3,
      enforce: true
    },
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    }
  }
}

but this code chunked a ‘commons.css’ file,I don’t want to chunk with css, how to do ?

[yangmingshan]

@sokra There is another reproducible example: https://github.com/yangmingshan/react-demo/tree/next
run npm run build will generate three empty CSS

[Legends]

@l0gicgate I just build your gist, but I get a bundle.css which is not empty.

[Legends]

Hm, I have downloaded this repo.

npm install
npm run build:dev

I can only see one bundle.css file appearing in the dist folder, also checked via win explorer, to make sure my IDE is not fooling me. When I build it, there is no vendor.css at all.

[l0gicgate]

@Legends I updated the repo. Please reinstall and run build again. You'll see empty vendor.css package.

[Legends]

@shinygang You have this configuration for vendor:

{
  splitChunks: {
    cacheGroups: {
             vendor: {
                     chunks: 'initial',
                      name: 'vendor',
                      priority: -10,
                     test: /[\\/]node_modules[\\/]/,  // <--- only for chunks from node_modules
          },

As I can see, you don't import any css/scss/... from within node_modules, therefore vendor.css is empty...
That's what I would say, but I am not an expert regarding webpack or node in general.

Or do you mean, why is there an empty vendor.css file as you don't have any css stuff imported from node_modules ? Why does it render this empty vendor.css?

Don't know, @sokra, @michael-ciniawsky ?

[l0gicgate]

@Legends it shouldn’t output empty css files. I just want a a vendor.js bundle.

[Legends]

Yes, I agree, added sokra to take a look at it.

[phiphou]

Same issue for me:

splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          enforce: true,
          chunks: 'all'
        }
      }
    }

produce vendors.js but also an empty vendors.css

[phiphou]

Tried https://github.com/KnisterPeter/html-webpack-exclude-empty-assets-plugin but with no luck...

[phiphou]

The issue happens also with webpack 4.5.0

[phiphou]

The issue is not happening for me with a very minimal project with no dependencies at all. But when I add VueJs in my case (React in @l0gicgate case) the issue happens. Hope this will help to fix this issue.

[Legends]

@ooflorent Can someone please take a look at this and explain what the issue is..

[benfavre]

This currently breaks all "complex" builds. Forcing the config to be set to not have a vendor group defined.

[phiphou]

Using mini-css-extract-plugin solves the problem for me. But it has currently no HMR support.

[pleerock]

Same issue here - adding simple splitChunks from an example completely breaks css output - css file is empty (Im using ExtractTextPlugin as well)

optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },

[Legends]

Try to use the mini-css-extract-plugin as metnioned by @phiphou

[l0gicgate]

@Legends I can’t use that since sass-loader requires extract-text-webpack plugin. Why can’t this just be fixed?

[alexander-akait]

@l0gicgate sass-loader don't requires extract-text-webpack-plugin

[Legends]

@l0gicgate I would suggest, you ask this question in the "extract-text-webpack plugin" they will for sure give you an answer, about their plugin and webpack 4 support...

For .scss files + sass-loader I use this configuration and I am using MiniCssExtractPlugin:

 {
                test: /\.(scss)$/,
                use: [
                    //    fallback: "style-loader",

                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader", // translates CSS into CommonJS modules
                    },
                    {
                        loader: "postcss-loader", // Run post css actions
                        options: {
                            plugins: function () { // post css plugins, can be exported to postcss.config.js
                                return [
                                    require("precss"),
                                    require("autoprefixer")
                                ];
                            }
                        }
                    },
                    {
                        loader: "sass-loader" // compiles Sass to CSS
                    }
                ]
            },

[phiphou]

Same config for me and you can implement HMR using this workaround : webpack-contrib/mini-css-extract-plugin#34 (comment)

[lili21]

The problem is related to extract-text-webpack-plugin. You should use mini-css-extract-plugin instead for webpack@4 supporting.

[phiphou]

@l0gicgate I think you can close the issue, since an alternative solution has been given.

You can though open a similar issue in extract-text-webpack-plugin's repository.

[l0gicgate]

@phiphou how is that a fix? The issue is also on this repo’s end. There’s even an option to ensure that bundles that have a size of zero shouldn’t even be output. I’m not closing this until it is resolved.

[lili21]

@l0gicgate You are using extract-text-webpack-plugin which doesn't support webpack@4. as I said before, you should use mini-css-extract-plugin.

[phiphou]

@l0gicgate As @lili21 said, the issue is not related to Webpack but to extract-text-webpack-plugin, it's not a bug from Webpack.

There is nothing to fix here, but in the extract-text-webpack-plugin's repository.

Create an issue there and close this one if you don't really want to use the new mini-css-extract-plugin (for some reasons I don't understand)

[ChrisSargent]

Thanks for the help here - I followed the instructions to use mini-css-extract-plugin and whilst it does put everything in to a single css file, I now get an extra styles.js file, which is also now included in my main html file as a <script>... any ideas how to solve this?

[ChrisSargent]

Okay, I was actually able to get back to 'normal' operation, i.e. splitting js files but ignoring css files by adding the following to webpack in optimization.splitChunks:

cacheGroups: {
    vendors: {
        test: /[\\/]node_modules[\\/].*js/
    }
}

It simply tells Webpack to only split node_modules based on .js files

[l0gicgate]

I have switched to mini-css-extract-plugin. Things broke even further trying to use extract-css-webpack-plugin when updating to Webpack 4.19.0.