Node.js使用webpack编译scss时报ChunkGraph未分配错误如何解决

该错误由extract-text-webpack-plugin与高版本Webpack的API不兼容导致，该插件已停止维护，无法适配Webpack 5及以上版本新增的ChunkGraph相关API，调用废弃的Chunk.getNumberOfModules方法时触发异常。

方案1：替换为Webpack官方推荐的CSS提取插件（推荐） #

mini-css-extract-plugin是Webpack官方维护的CSS提取工具，完全兼容Webpack 4/5版本，操作步骤如下：

• 卸载旧插件：

npm uninstall extract-text-webpack-plugin --save-dev

• 安装替代插件：

npm install mini-css-extract-plugin --save-dev

• 修改webpack.config.js配置：
  1. 头部引入新插件：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  

  2. 替换plugins数组中原来的new ExtractTextPlugin()配置：

  // 替换前
  // new ExtractTextPlugin({ filename: '[name].css' })
  // 替换后
  new MiniCssExtractPlugin({ filename: '[name].css' })
  

  3. 替换样式处理规则中的loader：

  // 原来的ExtractTextPlugin.extract配置替换为如下结构
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
  

• 配置修改完成后，删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，再运行npm run compile:scss测试即可。

方案2：降级Webpack到4.x版本 #

如果你暂时不想调整配置，可降级Webpack到extract-text-webpack-plugin支持的4.x版本：

• 卸载当前版本Webpack：

npm uninstall webpack webpack-cli --save-dev

• 安装兼容版本：

npm install webpack@4.x webpack-cli@3.x --save-dev

• 降级后需检查其他配套loader、插件的版本是否适配Webpack 4，避免出现新的依赖冲突。

内容的提问来源于stack exchange，提问作者Luis Hurtado