升级Node至18.18.0后Webpack构建AngularJS项目报错求助

问题场景 #

将Node.js 8.x项目升级至18.18.0后，使用Webpack构建AngularJS应用时触发错误：

TypeError: Cannot read properties of undefined (reading 'mangleWasmImports')

执行的构建命令：

webpack --config webpack.dev.js -d source-map  --node-env development --progress --watch

当前webpack.dev.js配置：

const webpack = require('webpack');
const commonConfigFactory = require("./webpack.common.js");
const merge = require('webpack-merge');
const path = require('path');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const baseDir = path.resolve(__dirname);

module.exports = merge(commonConfigFactory({ ENV: 'development' }), 
  {    
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        reportFilename: 'analyze.html',
      }),
    ],
    mode: 'development',
    module: {      
      rules: [
        { test: /\.css$/, use: 'css-loader' },
        { test: /\.ts$/, use: 'ts-loader' },
      ],
    }
  });

原因分析 #

这个错误核心是Webpack及相关依赖版本与Node.js 18.x不兼容：

• mangleWasmImports是Webpack 5.x引入的优化配置项，旧版Webpack（如4.x）在Node.js 18环境下，内部逻辑会尝试访问未定义的该属性
• 部分配套依赖（如webpack-cli、ts-loader、webpack-merge）的旧版本也存在Node.js 18的兼容性问题

解决方案 #

1. 升级Webpack及核心依赖到兼容版本 #

直接升级到支持Node.js 18的Webpack 5.x系列，同时同步更新配套工具：

npm install webpack@latest webpack-cli@latest webpack-merge@latest ts-loader@latest --save-dev

注意：webpack-merge新版本语法可能有变化，如果原配置报错，可改为使用merge的ES模块语法，或调整为mergeWithCustomize适配旧配置结构。

2. 强制配置mangleWasmImports属性 #

如果暂时无法升级Webpack，可在配置中显式声明该属性，避免内部逻辑报错：
在webpack.dev.js或webpack.common.js的optimization字段中添加：

optimization: {
  mangleWasmImports: false,
  minimize: false // 开发模式下无需压缩，可同时关闭
}

3. 检查并更新其他依赖 #

排查项目中其他老旧依赖（如仅支持Node.js 8的包），替换为维护中的版本，确保所有依赖的engines字段兼容Node.js 18。

验证步骤 #

执行依赖更新后，重新运行构建命令：

webpack --config webpack.dev.js -d source-map --node-env development --progress --watch

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