css tree shaking
我们和webpack(三)一样，用案例说话
安装css需要的两个loader，css-loader 和style-loader
npm install css-loader style-loader -D
在项目webpack.config.js配置文件中配置
在html文件中写一些结构
创建css文件，在里面写一些页面中有的和没有的css样式，没有的用来验证css抖动
在入口文件index.js中将依赖的css文件引入
执行npm run dev
css样式被打包到出口文件中，可以看到在打包好的文件里搜索background-color能够搜到
两个插件
mini-css-extract-plugin
单独将css代码抽离成能打包的文件的插件
- 下载
npm install --save-dev mini-css-extract-plugin
- 在配置文件中引入
- 在当前开发环境下载局部webpack
下载方式见webpack学习(一)
- 执行npm run dev,会发现dist文件夹中多出main.css文件
- 在index.html文件中引入打包后的css文件
- 在main.js中搜索background-color，发现没搜到，是因为我们已经给样式单独打包出css文件了，js文件里就没有行内样式了
*注：单独抽离css样式和把css解析成行内样式二者不可兼得，水火不相容
到这为止这个插件已经实现了将css样式单独抽离出文件的目的啦，接下来看下一个插件，把css文件也抖一下
purifycss-webpack
支持css tree shaking的插件
- 下载
npm i -D purifycss-webpack purify-css
- 原理
将html里的dom结构与css里的样式进行匹配，若匹配成功则不进行抖动，当然要根据哪个文件进行抖，是需要我们手动配置规定的
- 配置方法(先只根据一个Html进行抖动)
下图是只根据当前路径下的所有html文件进行抖动
css抖动一定要放在js之前，否则会报错。
- 引入node的一些公共变量
- 执行npm run dev,再看main.css中发现没有用到的都被抖掉了
上述只是dom和css能匹配的情况，那么如果我们在js里动态插入dom结构，这个插件还会好使吗？
- js中插入dom
- 执行npm run dev，发现a标签还是被抖掉了，没有留下来，是因为我们在配置文件中设置的是与html对比，并没有配置与js文件对比
如果想要匹配js，就可以在配置文件上再加上一条
这时候需要注意的是，我们要用到全局匹配，因此在引入glob时就需要引入glob-all,下载glob-all并引入
- 执行npm run dev,a就不会被抖掉了
以上两个插件帮助我们把css代码做了优化，但需要注意的是，我们写在dom里的到是被注释掉的dom结构，是不会被抖掉的哦，所以上线前，把注释的代码清空，也会提升性能哦~
结尾
webpack的学习还在继续~文章也会持续更新哦~若我的文章里有错误或问题，请及时联系我，v:lin2537421241
