先说一下项目技术背景,新得项目使用的是vue-cli2.0+,后期发现使用jenkins线上编译很慢,于是把webpack3升级到了4.2,最近项目在做IE9兼容测试,发现很多样式都飞了,小白在本地开发环境进行测试的时候,发现大量css样式无法引入
因为之前小白曾使用seajs+underscore + jquery搭建过一套组件结构,知道在IE9-下css选择器数量、文件大小以及style、link标签引入数量不能超过32个,所以比较轻松可以定位到问题,现在关键的问题是如何修改,在熟悉过vue-cli脚手架之后,发现在build/vue-loader.conf.js中有一段导出配置,代码如下
通过这个配置我们可以看到,开发环境下,css提取是关闭的,vue-loader文档中也提示,请只在生产环境下使用 CSS 提取,这将便于你在开发环境下进行热重载。这就导致所有的组件内部的css都是一个独立的style样式,所以首先应该提取css样式,将extract改为true,但是接着第二个错误出现了
因为在webpack4中提倡使用mini-css-extract-plugin插件,所以我们需要在webpack.dev.conf文件的plugins选项中新增此插件,进行提取
cnpm install mini-css-extract-plugin -D
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: {
new MiniCssExtractPlugin({
...
})
}复制代码
最后一步,我们引入,csss-split-webpack-pluign插件,进行文件切割
cnpm install csss-split-webpack-pluign -D
var CssSplitWebpackPlugin = require('csss-split-webpack-pluign')
...
plugins: {
new CssSplitWebpackPlugin({ size: 4000
})
}复制代码
至此,开发环境在IE9下样式已经完全加载成功。