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

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

我正在尝试根据 wiki section 从我的 css 中提取公共(public) block .我知道此文档适用于 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.js、foo.js、bar.js、foo.css 和 bar。 CSS。我错过了什么吗？我是 webpack 的新手。

谢谢。

最佳答案

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

minChunks 表示需要至少包含两次的模块将打包到 common.css 中。

foo.css 和 bar.css 入口暂无详细信息，大家可以先看看。 :)

关于css - 使用 ExtractTextPlugin 和 CommonsChunkPlugin 提取常用样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42015831/