extract multiple css files but created a unnecessary js file.

[stephenliu1944]

I want to extract multiple css files base on "src" and "node_modules" paths with specific output path.
I try to use splitChunks.cacheGroups but it create two files whitin js and css folders.
I don't need the xxx.styles.js file, it's unnecessary. how could I fix it? thanks.

entry: {
        main: ['./src/index.js']
},  
output: {  
        publicPath: '/',
        path: path.resolve(__dirname, 'build'),
        filename: `${ASSETS_PATH}/js/[chunkhash].[name].js`
},
optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /[\\/]node_modules[\\/]{1}.+\.css$/,
                    chunks: 'all',
                    enforce: true     // and what does it mean?
                }
            }
        }
    },
    module: {
        rules: [{           
            /**
             * project's css.
             */
            test: /\.(css|scss)$/,
            include: path.resolve(__dirname, 'src'),
            use: [
                MiniCssExtractPlugin.loader, 
                {
                    loader: 'css-loader'                 
                }, 
                {
                    loader: 'postcss-loader',
                    options: {
                        autoprefixer: {
                            browsers: ['last 2 versions']
                        },
                        plugins: () => [autoprefixer]
                    }
                }, 
                'sass-loader'
            ]
        }, {
            /**
             * third party css.
             */
            test: /\.(css|scss)$/,
            include: path.resolve(__dirname, 'node_modules'),
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `${ASSETS_PATH}/css/[name]_[contenthash].css`,
            chunkFilename: `${ASSETS_PATH}/css/[name]_[id].css`
        })
    ]

xxx.styles.js:

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{2:function(n,w,o){}}]);

[michael-ciniawsky]

It's a known bug in webpack itself webpack/webpack#1967 && https://github.com/webpack/webpack/projects/5 (Yes Column 2nd Card)

[vyushin]

@michael-ciniawsky It isn't webpack bug. I think MiniCssExtractPlugin should remove assets.
After almost 1 year the problem exists... :) Guys, you can resolve it by adding simple plugin, like this:

plugins: [
    new HtmlWebpackPlugin({
      template: resolve(SRC_DIR, './index.html'),
      inject: 'head',
      minify: IS_PRODUCTION,
      hash: true,
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      hmr: !IS_PRODUCTION,
    }),
    {
      apply(compiler) {
        compiler.hooks.shouldEmit.tap('Remove styles from output', (compilation) => {
          delete compilation.assets['styles.js'];  // Remove asset. Name of file depends of your entries and 
          return true;
        })
      }
    }
  ],

[Devinora]

@michael-ciniawsky It isn't webpack bug. I think MiniCssExtractPlugin should remove assets.
After almost 1 year the problem exists... :) Guys, you can resolve it by adding simple plugin, like this:

plugins: [
    new HtmlWebpackPlugin({
      template: resolve(SRC_DIR, './index.html'),
      inject: 'head',
      minify: IS_PRODUCTION,
      hash: true,
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      hmr: !IS_PRODUCTION,
    }),
    {
      apply(compiler) {
        compiler.hooks.shouldEmit.tap('Remove styles from output', (compilation) => {
          delete compilation.assets['styles.js'];  // Remove asset. Name of file depends of your entries and 
          return true;
        })
      }
    }
  ],

the file is no longer created, but a tag with the path to the file is generated.

[zanderwar]

@michael-ciniawsky It isn't webpack bug. I think MiniCssExtractPlugin should remove assets.
After almost 1 year the problem exists... :) Guys, you can resolve it by adding simple plugin, like this:

plugins: [
    new HtmlWebpackPlugin({
      template: resolve(SRC_DIR, './index.html'),
      inject: 'head',
      minify: IS_PRODUCTION,
      hash: true,
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      hmr: !IS_PRODUCTION,
    }),
    {
      apply(compiler) {
        compiler.hooks.shouldEmit.tap('Remove styles from output', (compilation) => {
          delete compilation.assets['styles.js'];  // Remove asset. Name of file depends of your entries and 
          return true;
        })
      }
    }
  ],

causes

(node:17584) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.