我正在尝试弄清楚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
将用于此扩展的弹出窗口显示。我试图将其对应文件夹中的内容向上移动一个级别,以便与扩展根目录中的清单文件在一起。我猜想生成
index.html
文件时的延迟是由差异加载的ES5包生成引起的。我在此项目的browserslist
文件中设置了Chrome >= 61
,但事实证明这没有效果。应该怎样正确地抓取
index.html
文件?我应该使用node脚本更长时间地观察该文件夹,还是有更优雅的解决方案?关于我的用例的其他信息:
我正在构建一个浏览器扩展程序。之前,当它是单个项目的Angular工作区时,使用webpack-extension-reloader进行实时重新加载,如此处所述。现在,我有两个独立的Angular项目,用于弹出窗口和选项页面,这两个项目的对应
index.html
页面都希望在扩展根文件夹中获取js和css文件。因此,我现在使用CopyPlugin、WebpackShellPlugin和一些sed命令来实现这种丑陋的hack。以下是添加的构建配置文件:
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"
postbuild
的 npm 脚本来完成这个任务。所以每次运行build
命令时,都会运行postbuild
;它只是调用一个节点脚本来移动文件。 - C.OGng build project1 --watch
,而后构建脚本会在这种情况下给我带来错误。因此,我没有实时重新加载和调试的选择。 - Risav Karna