webpack4 分离css

前言：webpack从1.0的版本 飞速的发展到了webpack5。今天我想记录一下webpack4 如何分离css。webpack4之前一直使用是extract-text-webpack-plugin 来分离css和js。在webpack4之后就无法再分离，很多人配置这个，不报错，但也达不到分离css。

官网上面有一句话：

:warning: Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

由此看来webpack4已经废弃 extract-text-webpack-plugin 这个插件了，现在使用的是 mini-css-extract-plugin

使用方法

npm install mini-css-extract-plugin --save

注意: 代码中无需再使用style-loader。如果使用将会报错：window is not define，这里我要补充一下，在 开发环境我们还是使用 style-loader, 在生产环境使用miniCssExtractPlugin.loader。具体请看插件管网，里面有详细配置说明https://github.com/webpack-contrib/mini-css-extract-plugin

{
    test:/\.css/,
    use:[miniCssExtractPlugin.loader,"css-loader",{
        loader: "postcss-loader",
        options: {
            plugins: () => [require('autoprefixer')]
        }
    }]
},
{
  test:/\.less$/,
  use:[miniCssExtractPlugin.loader,"css-loader",{
      loader: "postcss-loader",
      options: {
          plugins: () => [require('autoprefixer')]
      }
  },"less-loader"]
},