5

我使用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`
  ]
}

使用基本的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. 有什么我想念的，或者这根本不可能吗？

4

1 回答 1

4

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

使用merge.smartStrategy({ 'module.rules.use': 'prepend' })().

于 2019-03-29T11:21:14.637 回答