1.提取css为单独的文件
在之前的打包方式下，css被打包在js文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样css产生作用就慢了一步，导致闪屏现象的出现，这里我们可以把打包后的网页打开，将网络调成低速，然后刷新页面，就可以看到页面的html结构先出来，而css却迟迟未起作用：
过了一会之后，css起作用，页面渲染完毕
对于这种情况，我们应该创建单独的css文件，通过link标签加载进来，效果会好很多。
安装webpack插件MiniCssExtractPlugin
npm i mini-css-extract-plugin -D
接着，修改生产模式下的配置文件
将之前的style-loader替换成MiniCssExtractPlugin.loader，因为前者会动态创建style标签，这不是我们想要的。
指定生成css的位置
接着再次打包，可以看到打包后的目录，css有了专门的文件
此时项目中的css都被合并到了一个css文件中，但是并没有对其进行压缩处理。
这时候后就不会出现文章开头出现的闪屏现象。·
2.处理CSS兼容性问题
首先下载包
npm i postcss-loader postcss postcss-preset-env -D
修改配置
接着在pack.json里面加入配置项，他的意思是，1.适配各个浏览器最近的两个版本 2.适配市面上99%的浏览器 3. 已经不维护、死掉的浏览器不再适配。然后取这3个条件的交集。
3.css代码压缩
下载包
npm i css-minimizer-webpack-plugin -D
添加配置
打开css，已被压缩
