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.

seems odd to me - entry point are css files ? for me to help, i need clarity on this — VISHAL DAGA, Feb 27 '17 at 19:29
@VISHALDAGA Actually I have js files as entries too, I just simplified example. — Invis1ble, Feb 27 '17 at 23:29

score 1 · Answer 1 · answered Mar 27 '17 at 08:53

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. :)

Extract common styles with ExtractTextPlugin and CommonsChunkPlugin

1 Answers1