使用 webpack-merge 将加载器添加到规则“use”数组中

Question

我使用webpack-merge来合并开发和生产环境的 webpack 配置文件。为了在生产模式下提取 CSS，我使用mini-css-extract-plugin。根据其文档，我使用它代替style-loader仅在开发期间使用的 。此时，我的 CSS 块的 webpack 配置如下所示：

// webpack.common.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    process.env.NODE_ENV === `production` ? MiniCssExtractPlugin.loader : `style-loader`,
    `css-loader`,
    `postcss-loader`,
    `sass-loader`
  ]
}

这是可行的，但由于我正在使用webpack-merge，我想在我的公共配置文件中避免这种逻辑。现在，我尝试像这样将其拆分并合并webpack-merge各种加载器：

// webpack.common.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    `css-loader`,
    `postcss-loader`,
    `sass-loader`
  ]
}

// webpack.dev.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    `style-loader`,
    // webpack-merge should prepend all loaders from `webpack.common.js`
  ]
}

// webpack.prod.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    // webpack-merge should prepend all loaders from `webpack.common.js`
  ]
}

使用基本的mergefn，use数组不会被合并，而是被替换，这会导致错误：ModuleParseError: Module parse failed: You may need an appropriate loader to handle this file type.

所以我尝试使用merge.smartStrategy({ 'module.rules.use': 'prepend' })()，但出现错误：TypeError: this[MODULE_TYPE] is not a function。我是否缺少某些东西或者这根本不可能？

Answer 1

在拆分我的 webpack 配置时，我忘记将其包含MiniCssExtractPlugin在plugins我的产品部分中。配置文件。

使用 一切都按预期工作merge.smartStrategy({ 'module.rules.use': 'prepend' })()。

Answer 2

这是一个小更新。在现代版本的 webpack 中，您应该使用 mergeWithRules。在这种情况下，它看起来像这样

// webpack.common.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    `postcss-loader`,
    `sass-loader`
  ]
}

// webpack.dev.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    "style-loader"
  ]
}

mergeWithRules({
  module: {
    rules: {
      test: "match",
      use: "prepend",
    },
  },
})(common, dev);