Question

我已经创建了一个新的角度7项目，并将其建立束与名称runtime.js，main.js，polyfills.js，styles.js。 如何配置我的项目以使用自定义名称构建捆绑包？

我正在处理一个复杂的项目，该项目具有同时在页面上运行的多个角度应用程序（版本4.x）。我有一个单独的应用程序（也是Angular v.4.x），它处理用于加载所有其他应用程序包的配置。捆绑包列表是硬编码的，这是我无法更改的。因此，当我希望用此代码引导Angular 7应用程序时，由于捆绑包的名称不匹配，因此无法在生产环境中进行此操作。

我此时无法配置项目，因为据我所知，webpack配置对开发人员是隐藏的。我想编写一种将在创建捆绑包之后完成的后构建脚本，并将其简单地重命名文件，但是这种解决方法似乎有点冒险，而且我不知道这是否是切实可行的解决方案。

我的构建脚本：

"release": "ng build --prod --aot --extract-css=false --output-hashing=none --source-map=true"。

这是每个Angular v.4.x应用程序加载的捆绑包名称的列表，我需要在Angular v.7.x中具有相同的名称：

'main.bundle.js':,
'vendor.bundle.js',
'styles.bundle.js',
'inline.bundle.js',
'scripts.bundle.js',
'polyfills.bundle.js'.

这是我从Angular v.7.x应用程序中获得的捆绑软件的列表：

'runtime.js',
'main.js', 
'polyfills.js',
'styles.js'

Answer 1

您可以使用Angular Builders自定义构建的任何部分。您可以使用webpack构建器配置文件名：

angular.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js",

webpack.config.js

const webpack = require('webpack');
module.exports = {
  optimization: {
    runtimeChunk: false
  },
  output: {
    filename: '[name].[hash].min.js'
  }
}

然后运行正常的角度构建（将使用angular.json配置）：

ng build --prod

Answer 2

在angular.json部分中检查configurations文件，在使用的配置中应将outputHashing设置为true。

以供参考：ng build

如何重命名Angular 7生成的包？

2 个答案: