如何在Angular CLI的ng serve中自动执行Webpack文件合并并写入磁盘？

当然可以实现！Angular CLI虽然默认封装了Webpack配置，但我们可以通过自定义构建器扩展它，把你的JSON合并和磁盘写入逻辑直接整合到ng serve的工作流里，不用再手动维护两个独立脚本，还能自动监听源文件变化并更新输出。

下面是具体步骤：

1. 安装必要依赖 #

首先需要安装Angular CLI的自定义Webpack构建器，以及你已经在使用的两个插件（如果还没安装的话）：

npm install --save-dev @angular-builders/custom-webpack merge-json-webpack-plugin write-file-webpack-plugin

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

在项目根目录新建一个webpack.custom.js文件，把你的JSON合并和磁盘写入逻辑放进去：

const MergeJsonWebpackPlugin = require('merge-json-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

module.exports = {
  plugins: [
    // 配置你的JSON合并规则，替换成你实际的输入输出路径
    new MergeJsonWebpackPlugin({
      files: [
        {
          input: ['./src/assets/i18n/*.json'], // 你的源JSON文件路径
          output: './src/assets/i18n/merged.json' // 合并后的输出路径
        }
      ]
    }),
    // 配置WriteFilePlugin，确保合并后的文件写入磁盘
    new WriteFilePlugin({
      // 可选：只监听合并后的JSON文件，避免写入所有文件影响性能
      test: /merged\.json$/
    })
  ]
};

3. 修改Angular CLI的构建配置 #

打开项目根目录的angular.json（Angular 6+版本），找到你的项目配置节点，修改architect下的build和serve配置，替换默认的构建器为自定义Webpack构建器：

修改serve配置 #

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.custom.js" // 指定我们刚才创建的配置文件
    },
    "browserTarget": "你的项目名称:build",
    "port": 9978 // 保持你原来的端口配置
  }
}

修改build配置（确保生产构建也生效） #

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.custom.js"
    },
    // 保留你原来的build配置（比如outputPath、index、assets等）
  }
}

如果你用的是Angular 5及以下版本，配置文件是.angular-cli.json，需要修改defaults.build.builder和defaults.serve.builder为@angular-builders/custom-webpack:dev-server，并添加customWebpackConfig参数，逻辑是一致的。

4. 测试效果 #

现在直接运行npm start（也就是你的ng serve --port 9978脚本）：

• Webpack会自动执行JSON合并操作
• WriteFilePlugin会把合并后的文件写入到你指定的assets目录
• 当源JSON文件更新时，LiveReload会自动触发重新合并和写入，无需重启脚本

为什么之前的方法不生效？ #

因为ng serve默认使用Angular CLI封装好的Webpack配置，不会加载你自己单独的webpack.config.js，所以你的两个插件并没有被加入到构建流程中。通过自定义构建器，我们让Angular CLI加载了扩展配置，把插件整合到了它的原生构建链里。

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