'ng build'将脚本移动到子文件夹

Question

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

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

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

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

我该怎么做？

Answer 1

1. 运行ng eject -ec（为生产构建添加＆＃39; -prod＆＃39;或为JIT构建添加-aot false）。此命令将在根目录中公开 webpack.config.js 文件。 -ec标志将提取CSS文件（而不是从JS文件中提供它们）。 （再次注意到你的应用程序再次看到我的another answer）

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

3. 在 webpack.config.js 文件中编辑输出条目，并为JS文件添加所需的目录名称：

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

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

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

5. 运行npm run build，因为ng build不再适用于已撤销的应用。 您应该使用脚本和样式目录及其JS / CSS文件获取 dist 目录， index.html 应该直接位于 dist 之下，并且包含正确的包含：

   <link href="styles/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> <script type="text/javascript" src="scripts/inline.3d27fc24e48981450c35.bundle.js"></script>

<强>更新

由于 Angular 7 ，弹出命令已被禁用，因此此解决方案将不再有效（see this related question）。

Answer 2

您可以通过更改dist中的outDir更改angular-cli.json目录，但不能为js文件设置单独的目录。

如果你想这样做，你必须编写一个在构建后运行的小节点脚本，并将你想要的文件复制到dist/scripts。您还必须更改<script>内的index.html代码，以指向新位置。