问题描述

webpack1打包的css，使用了extract-text-webpack-plugin插件， 抽取出的css，被合并到了一个文件内。
由于业务发展，文件越来越大。 在现代浏览器中没有问题， 但是在ie8下出现，新增的css无法生效的问题

问题定位

1. 首先确认css无误
2. 定位出是在低版本ie下出现
3. 通过二分法调整失效的css在文件中的位置，进行调试
4. 发现某一个位置下，css是生效的
5. 确认该位置附近css无误
6. 注释一部分css, 发现原先不生效的css，生效了
7. 定位问题是由于超出未解析的原因
8. gg查找，发现是ie8以下有单css文件大小限制的问题(有人认为是选择器限制，有人认为是文件大小限制， 详情)

解决方案

对extract-text-webpack-plugin做一些调整， 支持传入文件大小限制，进行css切分

npm install -S extract-text-limit-webpack-plugin

使用方法

// 按 110大小分割， 分割后的文件会分布在110k附近， 不会严格按110k定义每个文件
new ExtractTextPlugin (utils.assetsPath ('css/[name].[contenthash].css'), {allChunks: true}, 110 * 1024),