标签: webpack-merge

我正在使用 webpack-merge 将两个 webpack.config 文件组合在一起，但我不断收到错误“TypeError：merge is not a function when I run the command”webpack --config ./config/webpack.config.prod.js ”

有没有其他人遇到过这个问题？

webpack.config.prod.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const TerserPlugin = require('terser-webpack-plugin');
const commonConfig= require('./webpack.config.common');
const merge = require('webpack-merge');

module.exports = merge(commonConfig, {

    //config code
 
})

我使用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 …