css - 使用 ExtractTextPlugin 和 CommonsChunkPlugin 提取常用样式

Question

我正在尝试从我的css相应wiki 部分中提取公共块。我知道此文档适用于webpack 1但webpack 2 似乎还没有相应的示例。我使用以下 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.js, foo.js,和. bar.js_ 我错过了什么吗？我是 webpack 的新手。foo.cssbar.css

谢谢。

Answer 1

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

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

现在，没有关于 entryfoo.css和的详细信息bar.css，但是您可以先检查一下。:)