'ng build' move scripts to subfolder

问题:

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  
...*

How can I do it?

回答1:

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

3. 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" }

4. 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 }),

5. 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>

Update:

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

回答2:

you can change the dist directory by changing the outDir in angular-cli.json but you can't set a separate directory for js files.

if you want to do that you'll have to write a small node script that runs after build and copies the files you want into dist/scripts. You'll also have to change the <script> tags inside index.html to point to the new location.