angular-cli @ webpack如何工作？

Question

I have used angular-cli with systemJS and am now comfortable with its build process,test cases & component interaction.

recently I upgraded my angular-cli to angular-cli@webpack .

But I am pretty confused with following things:

1. How does webpack build process works?
2. How can I install third party libraries like lodash,ng2-bootstrap etc with this webpack configuration as I cant see any webpack.config.ts file.
3. Why does it not show any bundle which contains JS files of my application?
4. I can only see typescript files of my application..why?

Thanks in advance.

Answer 1

1. When u run ng build it will build everything and output the files to the Dist folder
2. Just run npm install 'external-dependency' and you're good to go, just import it in the files u need it (and in app.module.ts)
3. U need to run ng build first, see 1
4. See 1

Answer 2

1. webpack read entry and build to desired output. here is an example

     entry: { 'app': './main.ts'//your entry point }, output: { path: helpers.root('dist'), filename: 'bundle.js' //your build file } 

2. It's simple, install your dependencies through npm and require them in your project and webpack will take care of them means it will bundle them into your build.

   Example

   npm install lodash

and in your project

require("lodash")

3. when you run application with ng-serve it does not build physicals files, it serve from memory and tha't why you don't see any file.
4. As long you are running your application with ng-serve it will not show you physicals files but if you run ng-build it will build physicals files to dist folder and you will be able to see them.

read more about webpack it's awesome