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

Question

我用webpack-merge to merge my webpack config files for dev and prod environments. To extract CSS in prod mode, I use the 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`
  ]
}

使用基本的 merge fn，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' })()。

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

Using webpack-merge to prepend loaders to a rules `use` array

javascript

css

webpack

webpack-merge