webpack使用purgecss-webpack-plugin去除无用的css

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 157 字 | 阅读时长 ≈ 1 分钟
webpack使用purgecss-webpack-plugin去除无用的css

使用插件purgecss-webpack-plugin，直接使用配置很简单文档

如果使用css modules，需要配置白名单whitelistPatterns，

如果开启css modules，配合babel-plugin-react-css-modules一起使用，需要特别注意css的引入方式是import styles from "./index.module.css";，而不能省略变量styles。

如果import "./index.module.css";这样的话，模块话的css会被忽略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
plugins: [
    new MiniCssExtractPlugin({
        filename: "css/[name].[contenthash:8].css",
        chunkFilename: "css/[name].[contenthash:8].css"
    }),
    // 放在MiniCssExtractPlugin之后
    new PurgecssWebpackPlugin({
        // collectWhitelistPatternsChildren: () => {
        //     return [/^purify-/];
        // },
        // whitelist: () => {
        //     return [/\.module\.(css|scss|sass)$/];
        // },
        whitelistPatterns: () => {
            return [/^purify-/];
        },
        paths: () => glob.sync([`${paths.appSrc}/**/*`], { nodir: true })
    })
]