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