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已經刪除了。