H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】在 webpack 中利用 ExtractTextPlugin 合并的 CSS 并不完整,为什么有些 CSS 代码没有合并进来?

需求其实很简单,就是把 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;
}

类似的问题

回答:

这是因为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文件里。

回答:

最后我通过修改 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;
        }
    },
}),

谢谢大家。

本文地址:H5W3 » 【Web前端问题】在 webpack 中利用 ExtractTextPlugin 合并的 CSS 并不完整,为什么有些 CSS 代码没有合并进来?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址