Webpack 4：如何使用 ExtractTextPlugin.extract()

Question

我正在将我的项目从 Webpack 3 迁移到 Webpack 4，并且我想替换extract-text-webpack-plugin为mini-css-extract-plugin.

我的 webpack 配置有这个部分

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

显然我不能执行return MiniCssExtractPlugin.extract({/*..*/}).

的等效语法是mini-css-extract-plugin什么？

完整的 webpack 配置https://gist.github.com/hanxue/74691af423247c9028c7ff811f373608

Answer 1

您可以更改generateLoaders为

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)

    if (options.extract) {
      return [MiniCssExtractPlugin.loader].concat(loaders)
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }