Когда index.html генерируется в сборке Angular?

Question

Я пытаюсь выяснить, когда на этапе сборки Angular создает файл index.html, чтобы впоследствии я мог переместить его в другой каталог. Я заметил, что когда я пытаюсь скопировать файлы с помощью WebpackShellPlugin, index.html не находится в каталоге dist / projectToMove во время фаз onBuildEnd и onBuildExit.

Конфигурация 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

У меня есть многоцелевое угловое рабочее пространство для расширения браузера. projectToMove - это тот, который будет использоваться для отображения всплывающего окна этого расширения. Я пытаюсь переместить содержимое соответствующей папки на один уровень вверх, чтобы оно находилось вместе с файлом манифеста в корневом каталоге расширения.

Я предположил, что эта задержка при создании файла index.htmlэто связано с генерацией пакета ES5 для дифференциальной нагрузки. Я установил Chrome >= 61 в своем файле browserslist для этого проекта, но оказалось, что это не имеет значения.

Как правильно выбрать файл index.html? Должен ли я смотреть папку дольше с помощью скрипта узла или есть более элегантное решение?

Дополнительная информация о моем случае использования:

Я создаю браузеррасширение. Раньше, когда это было одно угловое рабочее пространство проекта, живая перезагрузка работала с использованием webpack-extension-reloader, как объяснено здесь . Теперь, когда у меня есть два отдельных угловых проекта для всплывающего окна и страницы параметров, обе страницы 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 позволяет настроить свойство 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. Это все еще нужно сделать снаружи. Я думаю, что это ошибка и поэтому создал отчет об ошибке .

Answer 2

Почему бы просто не вывести сборку в правильную папку? Зачем бороться со сборкой, если вы можете просто получить выходные данные в выбранной вами цели?

Используя @angular/cli Я бы просто отредактировал angular.json, чтобы "outputPath" не был "dist/appname", но в зависимости от вашего варианта использования. .

В любом случае, я думаю, index.html - это единственный файл, который вам на самом деле не нужно копировать: его содержимое никогда не изменится, по крайней мере, если вы сохраните имена файлов согласованными, без хеш-кодов.

Почему бы вам просто не сохранить предварительно скомпилированный index.html там, где вам это нужно, и просто поместить результаты сборки в подпапку?