学习webpack4.X（二，处理CSS）

Less文件的打包和分离

安装less的服务和less-loader

npm install --save-dev less ess-loader

webpack.config.js配置loader

{
    test: /\.less$/,
    use: [{
           loader: "style-loader" 
        }, {
            loader: "css-loader" 
        , {
            loader: "less-loader" 
        }]
}

打包

webpack --mode development

把less文件分离：要使用mini-css-extract-plugin插件，插件安装

npm install --save-dev mini-css-extract-plugin

插件使用

{
    test:/\.less$/,
    use:[
        MiniCssExtractPlugin.loader,
        "css-loader",
        "less-loader"
         ]
}

Sass文件的打包和分离

安装node-sass和sass-loader

npm install --save-dev node-sass sass-loader

webpack.config.js配置loader

{
    test: /\.scss$/,
        use: [{
        loader: "style-loader" 
    }, {
        loader: "css-loader" 
    }, {
        loader: "sass-loader"
    }]
}

把SASS文件分离：需要用到上文提到的mini-css-extract-plugin插件

{
    test:/\.scss$/,
    use:[
        MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader"
    ]
}

自动处理CSS3属性前缀

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀，PostCSS有个自动加前缀的功能。

安装postcss-loader 和autoprefixer

npm install --save-dev postcss-loader autoprefixer

创建一个postcss.config.js文件，与webpack.config.js同级

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

webpack.config.js配置loader

{
    test:/\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        "postcss-loader"
    ]
}

消除未使用的CSS

安装PurifyCSS-webpack

npm install --save-dev purifycss-webpack purify-css

在webpack.config.js中引入glob

const glob = require('glob');

在webpack.config.js中引入purifycss-webpack

const  PurifyCSSPlugin = require("purifycss-webpack");

配置webpack.config.js中的plugins

plugins:[
    new PurifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
    })
]