[4.0.0-beta.0] Extracted text only output commons.css instead of separated css files when using optimization.splitChunks

[edwardfxiao]

package.json

    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "webpack": "^4.1.0",
    "webpack-cli": "^2.0.10",

config.js

  entry: {
    page1: PATH.ROOT_PATH + 'src/js/page1.js',
    page2: PATH.ROOT_PATH + 'src/js/page2.js',
    page3: PATH.ROOT_PATH + 'src/js/page3.js'
  },
  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial'
        },
      }
    }
  },
  module: {
     rules: [
       {
        test: /\.css?$/,
        include: [PATH.NODE_MODULES_PATH],
        exclude: [PATH.ROOT_PATH],
        enforce: 'pre',
        enforce: 'post',
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                // ident: 'postcss',
                plugins: loader => [
                  require('postcss-import')({
                    root: loader.resourcePath
                  }),
                  require('autoprefixer')(),
                  require('cssnano')()
                ]
              }
            }
          ]
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'css/[name].css',  allChunks: true })
  ]

page1.js

import STYLES from './page1.css'

page2.js

import STYLES from './page2.css'

page3.js

import STYLES from './page3.css'

When using webpack3, we use

  plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'commons',
    filename: 'commons.js',
  }),
  new ExtractTextPlugin({ filename: 'css/[name].css',  allChunks: true })
  ]

it outputs commons.css, page1.css, page2.css, page3.css.

However, in webpack4, it changes the CommonsChunkPlugin to the optimization.splitChunks, and it only outputs commons.css

[guoerwei]

+1

[mbarakaja]

Hello @edwardfhsiao.

Just to point out, take a look at mini-css-extract-plugin. It is like extract-text-webpack-plugin, but specific for CSS and Webpack 4.

[iongion]

@mbarakaja be aware that currently, mini-css-extract-plugin does not support HMR(hot reloading) if you want to move away from extract-text-webpack-plugin you will have to deal with this issue until the developer finds time to fix it.

I've lost a lot of time to find this out, but it was just there, in the project's README.md

[mbarakaja]

@iongion, that's true. Currently I'm using this plugin just to move third party CSS files that I import somewhere in my JS code. I can do it with CopyWebpackPlugin, but is breaks the webpack philosophy of importing anything you need.

Anyway, thanks for the advice.

[genshinw]

+1 how to solve it?

[wenjiamian]

+1 how to solve it?

[michael-ciniawsky]

TL;DR Use mini-css-extract-plugin instead :)

The webpack >= v4.0.0 'support' for extract-text-webpack-plugin was moved to mini-css-extract-plugin as more lightweight approach for webpack >= v4.0.0 and ETWP entered maintenance mode. We are sorry for the inconvenience here, but ETWP reached a point where maintaining it become too much of a burden and it's not the first time upgrading a major webpack version was complicated and cumbersome due to issues with ETWP. The mid-term plan is integrate CSS support directly into webpack to avoid this kind of issue in the future