Question

我使用webpack-merge合并用于开发和生产环境的Webpack配置文件。要以prod模式提取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`
  ]
}

使用基本的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`数组

1 个答案: