index.html 何时在 Angular 构建中生成？

Question

我想知道什么时候在构建阶段 Angular 生成 index.html 文件，以便我可以在之后将它移动到另一个目录。我注意到，当我尝试使用 WebpackShellPlugin 复制文件时，index.html 在 onBuildEnd 和 onBuildExit 阶段都不在 dist/projectToMove 目录中。

Webpack配置如下：

const WebpackShellPlugin = require('webpack-shell-plugin');

module.exports = {
  plugins: [
    new WebpackShellPlugin({
      onBuildEnd: [
        'echo "Files at end of compilation: "',
        'ls ./dist/apps/curemedit/'
      ],
      onBuildExit: [
        'echo "Copying Popup App contents..."',
        'ls ./dist/apps/curemedit/',
        'cp -rvf ./dist/apps/curemedit/* ./dist/apps/'
      ],
      safe: true
    })
  ]
};

两种情况下 ls 的输出：

favicon.ico
main.js
main.js.map
manifest.json
polyfills.js
polyfills.js.map
runtime.js
runtime.js.map
styles.js
styles.js.map
vendor.js
vendor.js.map

我有一个用于浏览器扩展的多应用程序 Angular 工作区。 projectToMove 是将用于此扩展的弹出显示的那个。我正在尝试将 dist 中相应文件夹的内容向上移动一级，以便它与扩展根目录中的清单文件一起。

我的猜测是，生成 index.html 文件的延迟是由于差异加载的 ES5 包生成所致。我已经设定 Chrome >= 61 在我的这个项目的 browserslist 文件中，但事实证明这没有什么不同。

抓取 index.html 文件的正确方法是什么？我应该使用节点脚本更长时间地观察文件夹还是有更优雅的解决方案？

有关我的用例的其他信息：

我正在构建一个浏览器扩展。在它是单个项目 angular 工作区之前，实时重新加载使用 webpack-extension-reloader 作为 explained here 工作。现在我有两个单独的 angular 项目用于弹出显示和选项页面，这两个项目对应的 index.html 页面都需要扩展根文件夹中的 js 和 css 文件。所以现在我使用 CopyPlugin、WebpackShellPlugin 和一些可悲的 sed 进行了丑陋的破解。

这是添加的构建配置文件：

ext.config.js:

const CopyPlugin = require('copy-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');

module.exports = {
  entry: {
    background: './src/chrome/background.ts'
  },
  plugins: [
    new CopyPlugin([
      {
        from: './src/chrome/manifest.json',
        to: '../manifest.json'
      }
    ]),
    new WebpackShellPlugin({
      onBuildExit: [
        // Rename sourcemaps, js and css files -> undo chunks' renamings -> move them to extension root
        'echo "Moving Options App Contents..."',
        'for f in ./dist/apps/proj1/*.js.map; do mv "$f"  "${f%.js.map}.proj1.js.map"; done ',
        'for f in ./dist/apps/proj1/*.js; do mv "$f"  "${f%.js}.proj1.js"; done ',
        'mv ./dist/apps/proj1/styles.css ./dist/apps/proj1/styles.proj1.css',
        'for f in ./dist/apps/proj1/[0-9].proj1.js; do mv "$f" "${f%.proj1.js}.js"; done ',
        'for f in ./dist/apps/proj1/workspace*.proj1.js; do mv "$f" "${f%.proj1.js}.js"; done ',
        'for f in ./dist/apps/proj1/workspace*.proj1.js.map; do mv "$f" "${f%.proj1.js.map}.js.map"; done ',
        'mv -v ./dist/apps/proj1/* ./dist/apps/'
      ],
      safe: true
    })
  ]
};

ext.popup.js:

const WebpackShellPlugin = require('webpack-shell-plugin');

module.exports = {
  plugins: [
    new WebpackShellPlugin({
      onBuildExit: [
        'echo "Moving Popup App Contents..."',
        'for f in ./dist/apps/proj2/*.js.map; do mv "$f"  "${f%.js.map}.proj2.js.map"; done ',
        'for f in ./dist/apps/proj2/*.js; do mv "$f"  "${f%.js}.proj2.js"; done ',
        'mv ./dist/apps/proj2/styles.css ./dist/apps/proj2/styles.proj2.css',
        'mv -v ./dist/apps/proj2/* ./dist/apps/'
      ],
      safe: true
    })
  ]
};

sed.sh:

#!/bin/sh

sed -i 's/.js/.proj1.js/g' ./dist/apps/proj1/index.html
sed -i 's/styles.css/styles.proj1.css/g' ./dist/apps/proj1/index.html
sed -i 's/.js/.proj2.js/g' ./dist/apps/proj2/index.html
sed -i 's/styles.css/styles.proj2.css/g' ./dist/apps/proj2/index.html

package.json:

"build": "rm -rf ./dist/ && ng build proj1 && ng build proj2 && ./sed.sh",
"buildprod": "rm -rf ./dist/ && ng build proj1 --prod && ng build proj2 --prod && ./sed.sh"

Answer 1

为什么不直接将构建输出到正确的文件夹中？如果您可以在您的首选目标中获得输出，为什么还要反对构建？

使用 @angular/cli 我会编辑 angular.json 所以 "outputPath" 不是 "dist/appname" 但适合您的用例。

无论如何，我认为 index.html 是您真正不需要复制的单个文件：它的内容永远不会改变，至少如果您保持文件名一致，没有哈希码。

你为什么不在任何你需要的地方保留一个预编译的 index.html，然后简单地将你的构建输出放在一个子文件夹中？

Answer 2

我不完全理解您的用例，但希望这会有所帮助。

Angular CLI 允许配置 index 属性。默认情况下，这只是一个路径，它指定 index.html 文件在您的 src 目录中的位置。输出路径将与输入路径相同。但是 CLI 也接受指定输入路径和输出路径的对象。

属性深度嵌套在 angular.json 文件中。在新生成的应用程序中，它位于 projects > project-name > architect > build > index.

"index": {
    "input": "src/index.html",
    "output": "../index.html"
}

这会将 index.html 文件置于其他文件之上一级。不幸的是，这不会改变对 index.html 文件中其他文件的引用。这仍然需要在外面完成。我认为这是一个错误，因此创建了 bug report.

index.html 何时在 Angular 构建中生成？

When is index.html generated in Angular build?

angular

webpack

google-chrome-extension

firefox-addon