Ionic 5如何配置自定义Webpack？启动报错求解决方案

这个问题的核心是Ionic 5和Ionic 3的构建架构完全不同——Ionic 3依赖ionic-app-scripts工具，而Ionic 5已经全面切换到Angular CLI的构建体系，你沿用旧的配置方式自然会触发对main.dev.ts/main.prod.ts的旧逻辑查找，而Ionic 5项目只有main.ts，因此报错。

下面是针对Ionic 5的正确自定义Webpack配置步骤：

1. 安装必要依赖 #

Angular CLI需要借助第三方库来支持自定义Webpack配置，首先安装@angular-builders/custom-webpack：

npm install @angular-builders/custom-webpack --save-dev

2. 创建自定义Webpack配置文件 #

在项目根目录创建你的自定义配置文件（比如custom.webpack.config.js），根据你的需求编写配置，示例如下：

module.exports = {
  // 这里添加你的自定义Webpack规则或插件
  module: {
    rules: [
      // 示例：添加自定义文件类型的loader
      {
        test: /\.svg$/,
        use: ['svg-sprite-loader']
      }
    ]
  }
};

3. 修改angular.json切换构建器 #

Ionic 5的构建逻辑由angular.json控制，需要将默认的构建器替换为支持自定义Webpack的版本：

3.1 修改build配置 #

找到projects下你的项目名称，定位到architect > build，修改如下：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./custom.webpack.config.js"
    },
    // 保留原有的其他配置（outputPath、index、main、polyfills等）
    "outputPath": "www",
    "index": "src/index.html",
    "main": "src/main.ts",
    // ... 其他原有配置
  },
  // 保留原有的configurations等配置
}

3.2 修改serve配置 #

同样在architect > serve下修改构建器：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "你的项目名称:build"
  },
  // 保留原有的configurations等配置
}

注意将你的项目名称替换为angular.json中实际的项目名称（比如app）。

4. 验证配置 #

完成上述修改后，运行ionic serve或ng serve，项目应该能正常启动，同时你的自定义Webpack配置会生效。

针对Cordova构建的补充 #

如果你的build:apk脚本（ionic cordova build android）也需要应用自定义Webpack配置，只需确保angular.json中对应的cordova-build架构（如果存在）也使用@angular-builders/custom-webpack:browser构建器，并指定customWebpackConfig路径即可。

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