我们在写代码的时候可能有些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已经删除了。