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

问题描述

ng构建，如下所示将文件导出到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:

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

"output": { "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", "disable": false }),

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

运行npm run build，因为ng build不再适用于弹出的应用程序. 您应该在其中包含 scripts 和 styles 目录的 dist 目录以及它们的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:

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

<link href="styles/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> <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屋！