如何在不每次运行build的情况下将webpack用于开发Angular2 /打字稿？

Question

I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here . That all seems to work but now I need to build each time I change a file.

Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.

Is it possible to do something so that webpack "expands" the bundle in some easy way?

PS I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.

Answer 1

Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:

npm install webpack-dev-server
webpack-dev-server webpack.config.js

Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application ` tags.

This is by far the best option as you get instant incremental recompile and live-reload.

While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:

webpack ---watch 

There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.