webpack4学习之路-2

处理css

要用到的loader css-loader style-loader ，

• css-loader:解析@import等语法
• style-loader：将css插入head中的style里
  loader要放在module的rules里
  loader的顺序从右到左，从下到上

module: { //模块
        rules: [
            {
            
                test: /.css$/,
                use: [{
                    loader: 'style-loader',
                    options: {     			//使css插入到head的顶部，不会覆盖模板中的样式
                        insertAt: 'top'
                    }
                }, 'css-loader']
            },
                // 可以处理less文件
            {
                test: /.less$/,
                use: [{
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    }, 'css-loader', //@import
                    'less-loader' //less->css
                ]
            }
        ]

    }

Tips 若是style中css过多，可以选择抽离css外联link，使用mini-css-extract-plugin

let MiniCss = require('mini-css-extract-plugin') //抽离css的插件
....
plugins: [
        new MiniCss({
            filename: 'main.css',      //抽离后的css文件
        })
    ],
module: { //模块
        rules: [ //规则
            {
                // 
                test: /\.css$/,
                use: [
                    MiniCss.loader,
                    'css-loader'
                ]
            },
            {
                // 
                test: /\.less$/,
                use: [
                    MiniCss.loader, //替换style-loader，让他不放在style里，而是用link存放
                    'css-loader',
                    'less-loader' //
                    //当前会放在index.html的head中的style里，如果不想堆积太多，要抽离css样式
                ]
            }
        ]
    },

Tips 此时抽离出了css文件，可以压缩css文件使用optimize-css-assets-webpack-plugin
手动添加选项卡optimization（优化项）与module并列

optimization: { //优化项  压缩css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        // minimizer: [new OptimizeCSSAssetsPlugin({})],//使用这个后，发现js没被压缩
    },

Tips 那我们还可以为代码添加浏览器前缀使用postcss-loader，autoprefixer加配置文件postcss.config.js
postcss-loader 一定要放在css-loader之前，就像css-loader一定要在style-loader之前一样

 module: { //模块
        rules: [ //规则
            {
                // 
                test: /\.css$/,
                use: [
                    MiniCss.loader,
                    'css-loader',
                    'postcss-loader', //注意先后
                ]
            },
            {
                // 
                test: /\.less$/,
                use: [
                    MiniCss.loader, //替换style-loader，让他不放在style里，而是用link存放
                    'css-loader',
                    'postcss-loader', //postcss-loader，autoprefixer自动添加浏览器前缀，需要配置文件
                    'less-loader' //
                    //当前会放在index。html的head中的style里，如果不想堆积太多，要抽离css样式
                ]
            }
        ]
    },

添加配置文件postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')] //使用该插件加前缀
}