我试图弄清楚在构建阶段Angular何时生成index.html文件，以便之后可以将其移动到另一个目录。我注意到，当我尝试使用WebpackShellPlugin复制文件时，在onBuildEnd和onBuildExit阶段，index.html都不在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中相应文件夹的内容向上移动一级，以便它与扩展根目录中的manifest文件一起。
我猜测生成index.html文件的延迟是由于ES 5 bundle生成差异加载。我在这个项目的browserslist文件中设置了Chrome >= 61，但事实证明这并没有什么区别。
获取index.html文件的正确方法是什么？我应该用一个节点脚本更长时间地监视文件夹，还是有更优雅的解决方案？

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

我正在构建一个浏览器扩展。以前它是一个单一的项目Angular 工作区，live reload使用webpack-extension-reloader作为explained here工作。现在我有两个单独的弹出显示和选项页面的Angular 项目，这两个项目的相应index.html页面都需要扩展根文件夹中的js和css文件。所以现在我有一个丑陋的hack使用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"

型