webpack9--删除冗余的CSS

我们在写代码的时候可能有些CSS并没有用到,我们如何利用webpack将冗余的CSS清除掉呢?

可以使用 purifycss-webpack 达到该目的。

1.安装 purifycss-webpack,glob 和 purify-css

npm i purifycss-webpack glob purify-css  -D

2.在配置文件中引入 purifycss-webpack

const glob = require('glob');
const PurifyCssWebpack = require('purifycss-webpack');

3.在plugins中作如下配置

plugins: [
new PurifyCssWebpack({
paths:glob.sync(path.join(__dirname,'src/*.html'))
})
]

里面的paths是绝对路径,如果你需要多个目录下的html文件,你还需要安装glob-all:

npm i glob-all -D

并将该模块引入到配置文件中:

const glob = require('glob-all');

paths数组的写法为:

paths: glob.sync([
path.join(__dirname, '.html'),
path.join(__dirname, 'src/.html')
]),

你可以故意写一些多余的CSS,打包完成后,可以看到没用到的CSS已经删除了。

上一篇:oracle之触发器


下一篇:oracle数据库触发器(trigger)用法总结