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
 

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"
    }]
}

{
    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')),
    })
]