从零开始webpack4.x（四）样式loader

module: { // 模块
        rules: [ // 规则 css-loader 解析@import 这种语法
            // style-loader 把css 插入到head标签中
            // loader的特点 希望单一
            // loader用法 字符串只用一个loader
            // 多个loader用 []
            // loader执行顺序是 默认从右到左 从下到上
            // loader还可以写成对象 可以对一个参数options
            { 
                test: /\.css$/, 
                use: [
                    {
                        loader: ‘style-loader‘,
                        options: {
                            insertAt: ‘top‘
                        }
                    },
                    ‘css-loader‘,

                ] 
            },
            { // sass stylus node-sass sass-loader 
                test: /\.less$/, 
                use: [
                    {
                        loader: ‘style-loader‘,
                        options: {
                            insertAt: ‘top‘
                        }
                    },
                    ‘css-loader‘,        // 顺序不能变 默认从下到上执行
                    ‘less-loader‘        // 把less -> css
                ] 
            }
        ]
    }

plugins: [
        new MiniCssExtractPlugin({
            filename: ‘main.css‘    // 生成等css文件名
        })
 ],

module: {
　　rules: [
　　　　{

　　　　　use: [

　　　　　　　MiniCssExtractPlugin.loader,

　　　　　　　‘css-loader‘,

　　　　　　　‘postcss-loader‘
　　　　　]
　　　　}
　　]
}

module.exports = {
  plugins: [
    require(‘autoprefixer‘)  //  添加浏览器前缀

] }

"browserslist": [
        "defaults",
        "not ie <= 8",
        "last 2 versions",
        "> 1%",
        "iOS >= 7",
        "Android >= 4.0"
  ]