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已经删除了。