如何在Angular应用中通过Webpack将多个bundle文件合并为单个JS文件

我来帮你解决这个问题！用Angular-CLI（内置Webpack）把main.bundle.js、scripts.bundle.js等多个bundle合并成单个bundle.js，同时让生成的index.html自动引用它，其实可以通过两种方式实现——要么直接调整Angular-CLI的原生配置，要么扩展Webpack配置来更灵活地控制，下面详细说明：

方法一：调整angular.json原生配置（无需额外依赖） #

Angular-CLI默认在生产构建时会做代码分割生成多个bundle，我们只需要关闭代码分割相关配置即可：

1. 打开项目根目录下的angular.json文件
2. 找到你的项目节点（一般是projects下的项目名），定位到architect -> build -> options
3. 添加或修改以下配置：

   "optimization": {
     "scripts": true,
     "styles": {
       "minify": true,
       "inlineCritical": false
     },
     "fonts": true,
     "splitChunks": false  // 关闭代码分割，合并所有JS chunk
   },
   "runtimeChunk": false  // 关闭runtime单独打包，把runtime代码合并到主bundle
   

4. 保存文件后，运行生产构建命令：

   ng build --prod
   

这样构建完成后，dist目录里就只会生成单个main.bundle.js，index.html也会自动引用这个文件，不会再出现多个bundle的引用。

注意： 如果你在angular.json的scripts数组里配置了第三方脚本（比如jQuery），这些脚本也会被合并到这个单个bundle里。

方法二：用custom-webpack扩展配置（更灵活） #

如果原生配置满足不了你的需求（比如想自定义bundle的文件名），可以用@angular-builders/custom-webpack来扩展Webpack配置：

1. 首先安装必要依赖：

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

2. 在项目根目录创建custom-webpack.config.js文件，写入以下配置：

   module.exports = {
     output: {
       // 自定义生成的bundle文件名，这里固定为bundle.js
       filename: 'bundle.js',
       chunkFilename: '[id].chunk.js'
     },
     optimization: {
       splitChunks: false,  // 关闭代码分割
       runtimeChunk: false  // 合并runtime代码
     }
   };
   

3. 修改angular.json里的构建和服务配置：
   • 将architect -> build -> builder改为@angular-builders/custom-webpack:browser，并添加customWebpackConfig配置：

     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./custom-webpack.config.js",
           "mergeStrategies": {
             "optimization": "replace",
             "output": "replace"
           }
         },
         // 保留你原有的其他配置（比如outputPath、index、main等）
       }
     }
     

   • 将architect -> serve -> builder改为@angular-builders/custom-webpack:dev-server：

     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       "options": {
         "browserTarget": "你的项目名:build"
       }
     }
     

4. 运行生产构建命令：

   ng build --prod
   

这时候dist目录里会生成你自定义的bundle.js，index.html也会自动引用这个文件。

验证结果 #

构建完成后，打开dist目录：

• 应该只有一个JS bundle文件（比如bundle.js或main.bundle.js）
• 打开index.html，里面只会有对这个单个bundle的<script>引用

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