配置在 angular.json 中创建多个文件的多个入口点答案

【问题标题】：Configure multiple entry points that created multiple files in angular.json配置在 angular.json 中创建多个文件的多个入口点
【发布时间】：2019-04-03 21:47:16
【问题描述】：

我之前曾使用 webpack 开发 angular 5，其中 webpack 支持创建多个文件的多个入口点

  entry: {
    app: 'src/app.ts',
    vendor: 'src/vendor.ts'
  }

参考链接：https://v5.angular.io/guide/webpack

但是现在我开始研究具有 CLI 的 Angular 7。我没有找到一种可以在 angular cli 中处理的方法。将文件分成块的更好方法是什么？我们应该继续使用 webpack 而不是 cli 还是可以使用 CLI 来完成？非常感谢任何帮助。

【问题讨论】：

我现在正在尝试解决同样的问题。我想使用angular.json 服务和构建步骤来编译我的迁移。你找到解决办法了吗？
@OriolMiró 参考这个github.com/ParallelTask/ng-starter 我已经创建了这个仓库。仔细参考 angular.json 和 package.json 脚本部分，您将了解如何做到这一点
这不是我想要的，因为我正在使用 Nx，但它帮助我找到了方法。

标签： angular webpack

【解决方案1】：

Angular CLI 是对一些默认 Webpack 设置（除其他外）的一个很好的包装器。默认情况下，ng build 将创建以下 JS 文件：

main.js
polyfills.js
runtime.js
styles.js
vendor.js

（如果您将这些文件配置为"outputHashing": "all"，则这些文件可能会以哈希为后缀，这是生产的默认值）

此外，如果您对功能模块利用延迟加载。 Angular CLI 可能会将 app.js 拆分为名为 1.chunk.js、2.chunk.js 等的块。

【讨论】：

【解决方案2】：

如果你想在 vendor js 中创建每个节点模块的块，你可以简单地在 webpack.config.js 中进行如下配置：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

【讨论】：