Extract common styles with ExtractTextPlugin and CommonsChunkPlugin

Question

I'm trying to extract common chunk from my css according wiki section. I know that this docs is for webpack 1 but for webpack 2 seems like there is no corresponding example yet. I use the following webpack config:

module.exports = {
    context: srcPath,
    entry: {
        foo: './css/pages/foo.css',
        bar: './css/pages/bar.css'
    },
    output: {
        path: distPath,
        publicPath: '/assets/',
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract([
                'css-loader'
            ])
        }]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: 2
        }),
        new ExtractTextPlugin({
            filename: 'css/[name].[contenthash:base64:5].css',
            allChunks: true
        })
    ]
};

I can't get why common.css is not appears after building. Just common.js, foo.js, bar.js, foo.css and bar.css. Am I missing something? I'm new in webpack.

Thanks.

Answer 1

Reference https://webpack.js.org/plugins/commons-chunk-plugin/#options

minChunks means module which need to be contained at least two times will bundle into common.css.

Now, no detail about entry foo.css and bar.css, but you can check it first. :)