style-loader、mini-css-extract-plugin的区别

webpack初入门时强调处理css文件时一定要使用style-loader，使用loader的顺序为：
[“style-loader”, “css-loader”, “sass-loader”]，webpack调用loader是从右往左的，先使用sass-loader将.less或.scss文件转换成css，再使用css-loader加载css文件，最后使用style-loader将css-loader处理的样式注入到HTML页面中。

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

但如果使用了 mini-css-extract-plugin 插件，就可以不用style-loader了。

mini-css-extract-plugin：把js中import导入的样式文件，单独打包成一个css文件，结合html-webpack-plugin，以link的形式插入到html文件中。
注：
此插件不支持HMR，若修改了样式文件，是不能即时在浏览器中显示出来的，需要手动刷新页面。

使用方式如下：

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: path.join(__dirname, "src/index.js"),
  output: {
    path: path.join(__dirname, "dist"),
    filename: '[name]-[hash].js'
  },
  module: {
    rules: [      
      {
        test: /\.(scss|less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader', 
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '/src/index.html')
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css' // 这个配置可以不写，默认输出文件名与webpack的output设置一致
    })
  ]
}