webpack CSS LESS

官網 https://webpack.docschina.org/loaders/postcss-loader/

css 打包 分離

安裝

npm install --save-dev extract-text-webpack-plugin

引入

const ExtractTextPlugin = require('extract-text-webpack-plugin');

plugins裏配置

new ExtractTextPlugin('assets/css/index.css');//參數爲路徑位置

config.js裏面 module.rules

rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:"css-loader"
            })
        }]

遇到一個錯誤： Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

extract-text-webpack-plugin還不能支持webpack4.0.0以上的版本

解決辦法

npm install --save-dev extract-text-webpack-plugin[@next]

會下載到+ extract-text-webpack-plugin@4.0.0-beta.0

Less打包和分離

安裝less less-loader

npm install --save-dev less less-loader

config.js 裏面配置rules

{
            test:/\.less$/,
            use:ExtractTextPlugin.extract({
                fallback:"style-loader",
                use:[{
                    loader:"css-loader"
                },{
                    loader:"less-loader"
                }]
            })
        }

css自動加載前綴

npm install --save-dev postcss-loader autoprefixer

postcss.config.js

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

在webpack.config.js的添加時還要注意下面的幾點

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.  
2018-09-14 14:54:48 星期五

這段文檔的要點就是讓你注意postcss-loader應該在css-loader style-loader以後，可是必定要在其餘的預處理器preprocessor loaders以前，例如
sass|less|stylus-loader。

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', 
                options: { importLoaders: 1 } 
            },
            'postcss-loader'
        ]
    })

}


           {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader",
                        options: {importLoaders: 2}
                    },
                        {
                            loader: "postcss-loader"
                        }, {
                            loader: "less-loader",
                        },
                    ]
                })
            },

消除多餘CSS

PurifyCSS

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

引入node的glob對象,檢查HTML模板， webpack.config.js

const glob = require('glob');

const PurifyCssPlugin = require('purifycss-webpack');
plugins:[
    new PurifyCssPlugin({
        paths:glob.sync(path.join(__dirname,'public/*.html'))
    })
]

參考： https://segmentfault.com/a/1190000013284467?utm_source=index-hottest

http://www.javashuo.com/article/p-qadfctum-er.html