使用ExtractTextPlugin和CommonsChunkPlugin提取常见样式

时间:2017-02-03 02:38:05

标签: css webpack-2 extract-text-plugin commonschunkplugin extracttextwebpackplugin

我试图根据wiki sectioncss中提取常见的块。我知道此文档适用于webpack 1但适用于webpack 2 seems like there is no corresponding example yet。我使用以下webpack配置:

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
        })
    ]
};

我无法理解建造后common.css未出现的原因。只需common.jsfoo.jsbar.jsfoo.cssbar.css。我错过了什么吗?我是webpack的新手。

感谢。

1 个答案:

答案 0 :(得分:1)

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

minChunks表示需要至少包含两次的模块会捆绑到common.css

现在,没有关于条目foo.cssbar.css的详细信息,但您可以先查看它。 :)