在 webpack 中利用 ExtractTextPlugin 合并的 CSS 并不完整，为什么有些 CSS 代码没有合并进来？

Question

需求其实很简单，就是把 js 中所有 require('./*.css') 的 css 用 webpack 合并成为 bundle_style.css。

但是 webpack 合并出来的 bundle_style.css 不完整，本来应该合并 a/b/c.css 的，但最终只包含了 c.css。

不知是什么地方出了问题，为了解决这个问题，我给开了个最小测试单元 https://github.com/SolidZORO/... 求指点。

代码展示

// a.js

require('./a.css');

console.log('a.js');

// a.css

.a {
    width: 1px;
}

类似的问题

• webpack配置多入口，多入口下的css如何合并

• Extract Text Plugin: require.ensure() causes incomplete file (Webpack 2) #2450

Answer 1

这是因为ExtractTextPlugin是按照打包出来的chunk（js层面）来打包css的，我看你的webpack配置里定义了3个entry，那么最终打包出来也就会有3个chunk，理论上来说也会打包出3个css文件出来。

但由于你给ExtractTextPlugin传入的参数是一个固定的css文件名：'bundle_style.css'，因此打包出来的css文件都互相覆盖了，也就只看到最后打包的c.css了，关于ExtractTextPlugin的传参请看我这篇文章

至于你想达到的需求，也很简单，你就做个公用的module，每个入口都去加载这个Module，然后搭配上CommonsChunkPlugin让这个Module可以抽取出来成为一个独立的chunk，那么你在这个module里加载的所有css，都会最终被打包到同一个css文件里。

Answer 2

最后我通过修改 minChunks 的方式，输出了所有的 css。

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/bundle_[name].js',
    minChunks: (module, count) => {
        if (/\.css/.test(module.resource)) {
            return true
        }
        else {
            return count >= 2;
        }
    },
}),

谢谢大家。