style-loader和mini-css-extract-plugin细说

style-loader、mini-css-extract-plugin的区别，以及如何使用

webpack处理css文件时采用从右向左加载的机制去处理

style-loader

使用loader的顺序为：
[“style-loader”, “css-loader”, “sass-loader”]，先使用sass-loader将.less或.scss文件转换成css，再使用css-loader加载css文件，最后使用style-loader将css-loader处理的样式注入到HTML页面中。

style-loader：把js中import导入的样式文件打包到js文件中，运行js文件时，将样式自动插入到<style标签中。
如图：
使用如下：

module: {
        rules: [ // 从右向左解析
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader']
            }
        ]
    }

mini-css-extract-plugin插件

mini-css-extract-plugin：把js中import导入的样式文件，单独打包成一个css文件，结合html-webpack-plugin，以link的形式插入到html文件中。
如图中：

使用：

 module: {
        rules: [ // 从右向左解析
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [require('autoprefixer')]
                        }
                    }
                }, 'less-loader']
            }
        ]
    }

plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css',
            chunkFilename: '[id].css'
        })
    ],