'ng build' 将脚本移动到子文件夹 [英] 'ng build' move scripts to subfolder

问题描述

ng build 将文件导出到 dist 文件夹，如下所示

ng build exports files to dist folder as follow

index.html  
main.bundle.js  
styles.bundle.js  
...

我希望脚本位于子文件夹中

I want scripts to be in subfolder

*index.html  
scripts/main.bundle.js  
scripts/styles.bundle.js  
...*

我该怎么做?

推荐答案

1. 运行 ng eject -ec(为生产构建添加 '-prod'，或为 JIT 构建添加 -aot false).此命令将在您的根目录中公开 webpack.config.js 文件.-ec 标志将提取 CSS 文件(而不是从 JS 文件中提供它们).(要再次取消"您的应用程序，请参阅我的另一个答案)

2. 运行 npm install 以安装 webpack 加载器

1. run ng eject -ec (add '-prod' for production build, or -aot false for JIT build). This command will expose webpack.config.js file in your root directory. -ec flag will extract CSS files (instead of serving them from JS file). (to 'uneject' your app again see my another answer)

2. Run npm install in order to install webpack loaders

在 webpack.config.js 文件中编辑 output 条目并为 JS 文件添加所需的目录名称:

In webpack.config.js file edit output entry and add your desired directory name for JS files:

输出":{"path": path.join(process.cwd(), "dist"),"filename": "scripts/[name].[chunkhash:20].bundle.js","chunkFilename": "scripts/[id].[chunkhash:20].chunk.js"}

因为我们在 ng eject 命令中添加了 -ec 标志，所以我们现在也有 CSS 文件.我们也可以通过修改 webpack.config.js 中 plugins 条目下的 ExtractTextPlugin 插件将其移动到 dist/styles文件:

because we added -ec flag to ng eject command, we now have CSS file(s) as well. We can also move it to dist/styles by modifying ExtractTextPlugin plugin under plugins entry in webpack.config.js file:

new ExtractTextPlugin({"filename": "styles/[name].[contenthash:20].bundle.css",禁用":假}),

run npm run build 因为 ng build 不再适用于弹出的应用程序.您应该获得 dist 目录，其中包含 scripts 和 styles 目录以及它们的 JS/CSS 文件，index.html 应该直接位于 dist 下并且有正确的包含，例如:

run npm run build since ng build no longer works on ejected apps. You should get dist directory with scripts and styles directories inside it along with their JS/CSS files, index.html should be located directly under dist and have correct includes like:

<script type="text/javascript" src="scripts/inline.3d27fc24e48981450c35.bundle.js"></script>

更新:

自 Angular 7 以来，弹出命令已被禁用，因此此解决方案将不再有效(请参阅此相关问题).

Since Angular 7 the eject command has been disabled so this solution will not longer work (see this related question).

这篇关于'ng build' 将脚本移动到子文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！