'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. run ng eject -ec(为生产构建添加'-prod',或者-aot false为JIT构建添加'-prod ).此命令将在根目录中公开webpack.config.js文件.-ecflag将提取CSS文件(而不是从JS文件中提供它们).('再次'取消'你的应用程序看到我的另一个答案)

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不再适用于弹出的应用程序.你应该获得带有脚本和样式目录的dist目录以及它们的JS/CSS文件,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开始,弹出命令已被禁用,因此此解决方案将不再起作用(请参阅此相关问题).