在webpack+vue中，如何将css相同的部分提取到一个公共的common.css中？

Question

在webpack+vue中，如何将css相同的部分提取到一个公共的common.css中？

var webpack = require('webpack');
var ExtractTextPlugin =require("extract-text-webpack-plugin");


module.exports = {
    //插件项
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "common.js",
            minChunks: 5,
        }),
        new ExtractTextPlugin("[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Vue: "Vue",
        })
    ],
    //页面入口文件配置
    entry: {
        // 这里有很多个各个界面的模块
    },
    //入口文件输出配置
    output: {
        path: 'dist/test',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap") },
            { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.(gif|jpg|png)\??.*$/, loader: 'url-loader?limit=20000&name=images/[name].[ext]'},
            { test: /\.(woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=1&name=fonts/[name].[ext]'},
            { test: /\.vue$/, loader: 'vue-loader'},
        ]
    },
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap"),
            less: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
        }
    },
    resolve: {
        alias: {
            "jquery": __dirname + "/vendor/bower/jquery/dist/jquery.min",
            "Vue": __dirname + "/vendor/bower/vue/dist/vue",
            // 还有各种外部库
        }
    },
};

现在这个配置文件打包的结果是：
js有独立的common.js，每个入口都有出去公共模块的js，这是没问题的；但是css却有这样的错误：common.css里面虽然是公共的内容，但是每一个入口的css都包含所有的css，没有除去公共模块

Answer 1

这里可能有你需要的答案！
https://github.com/webpack/le...

Answer 2

new webpack.optimize.CommonsChunkPlugin({ //提取公共css和js

  name: 'vendor',
  minChunks: function(module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      ((/\.js$/.test(module.resource) &&
        module.resource.indexOf(path.join(__dirname, '../node_modules')) ===
          0) ||
        /\.css$/.test(module.resource))
    );
  }
}),





跑了下题主的项目代码（见评论），发现问题出在 `CommonsChunkPlugin` 的 `minChunks` 配置上。entry: {

react: ['react', 'react-dom']
}
plugins: [
new webpack.optimize.CommonsChunkPlugin({

name: 'react',
minChunks: Infinity

})
]
这样的结果是只有 react 和 react-dom 被打包到公共文件，其他的公共文件都不会打包。建议去掉 minChunks，使用默认配置就好了。如果希望公共 js 文件里面只有 React，但是 css 代码能打包到公共 css，可以这样写：minChunks: function (module, count) {
const resource = module.resource
// 以 .css 结尾的资源，重复 require 大于 1 次
return resource && /.css$/.test(resource) && count > 1
}

作者：黑猫
链接：https://www.zhihu.com/questio...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Answer 3

请问已经解决了吗，我也遇到同样的问题。