webpack踩坑系列之mini-css-extract-plugin

这个插件也有2个坑在里面。

第一个，版本兼容坑。在使用mini-css-extract-plugin的0.9.0版本的时候估计是和其他某个插件冲突了，会有这么一个错误

No module factory available for dependency type: CssDependency

可以尝试降级到0.8.2或者0.8.0版本即可解决

第二个，使用了mini-css-extract-plugin的loader必须配合plugin部分一起使用。否则会报错。就像这样

TypeError: this[MODULE_TYPE] is not a function

webpack配置代码如下：

{
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: "[id].css"
      })
    ],
    module: {
      rules: [
        {
          test: /\.(scss|sass|css)$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        }
      ]
    }