我试图弄清楚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文件的正确方法是什么?我应该使用节点脚本在文件夹中看更长的时间,还是有一个更优雅的解决方案?
有关我的用例的其他信息:
我正在构建浏览器扩展。在它是单个项目角工作区之前,使用webpack-extension-reloader作为explained here进行实时重新加载。现在,我有两个单独的角度项目用于弹出显示和选项页面,这两个项目的相应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"
为什么不将构建文件输出到正确的文件夹中?如果您只能将输出放在您的首选目标中,为什么还要打拼?
使用@angular/cli
我只编辑angular.json
,所以"outputPath"
不是"dist/appname"
,而是适合您的使用情况。
无论如何,我认为index.html是您真正不需要复制的单个文件:它的内容永远不会改变,至少如果您保持文件名一致且没有哈希码。
为什么不简单地在需要的地方保留预编译的index.html,而只是将构建输出放在子文件夹中?