webpack4+学习笔记：9. CSS样式处理之清除多余样式及自动追加css属性前缀

CSS样式处理之清除多余样式及自动追加css属性前缀

1. 清除多余样式
（1）安装 purifycss-webpack purify-css golb 插件

npm install purifycss-webpack purify-css glob -D

查看 package.json 文件

（2）webpack.config.js 配置
① 我们先看配置前在 css.css 文件中添加多余样式打包后的效果
src/css/css.css 文件中添加多余样式：

执行打包命令 npm run build 后在 dist/css/common.css中的样式：


可见多余的样式仍然一起打包了，实际开发中如果运用bootstrap就会存在许多用不到的样式，一起打包太浪费性能，所以我们可以利用插件清除多余样式。

② 对 webpack.config.js 进行配置

let PurifycssWebpack = require("purifycss-webpack");
let glob = require("glob");

plugins: [
   new PurifycssWebpack({
       //*.html 表示 src 文件夹下的所有 html 文件，还可以清除其它文件 *.js、*.php···
       //注意这里是 paths ！！！笔者已经写错好多次少了个s了！！！
       paths: glob.sync(path.resolve("./src/*.html"))
   }),
]        

打包

npm run build

再看 dist/css/common.css 文件

可以看到，多余样式并未一起打包

关于更多样式清除用到的插件，可以看文档多学习:
purifycss-webpack purify-css glob

2. 自动追加css属性前缀
（1）安装

npm install postcss-loader autoprefixer -D

查看 package.json 文件

（2）webpack.config.js 配置

module: {
   rules: [
        {
            test: /\.css$/,
            use : [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" },
                { loader: "postcss-loader" }		//追加前缀
            ]
        },
        {
            test: /\.less$/,
            use : [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" },
                { loader: "less-loader" },
                { loader: "postcss-loader" }		//追加前缀
            ]
        }
    ]
},

（3）在项目根目录中新建 js 文件 postcss.config.js 并进行配置
① 新建 postcss.config.js 文件

② postcss.config.js 配置

module.exports = {
    plugins: [
        require("autoprefixer")
    ]
}

（3）在 src/css/ 的样式文件中添加一些属性做测试

打包后查看打包好的 common.css 文件

css 属性已自动追加前缀啦

更多关于 postcss-loader 和 autoprefixer 请戳文档

至此，CSS样式处理就结束了~~~

关于 webpack4+ 的知识点笔者目前就学到这儿，等后续学习了再来接着记录~~~