Use webpack for the UI build

[damienbod]

No description provided.

[damienbod]

https://github.com/AngularClass/angular2-webpack-starter
https://github.com/preboot/angular2-webpack

[damienbod]

https://webpack.github.io/
https://webpack.github.io/docs/
https://github.com/webpack/webpack

[damienbod]

https://www.youtube.com/watch?v=j9w5hFit5rM

[robisim74]

Hi @damienbod,

I've tried to integrate webpack in your project, and you can see the result here.
What changes:

• added vendor.ts in app folder to import all libraries
• added webpack.config.js for webpack configuration
• updated package.json
• updated tsconfig.json (switched to CommonJS)
• updated index.html
• removed systemjs.config.js
• removed gulpfile.js

Webpack creates only two bundles in dist folder: one for the libraries, and one for the app. To build bundles, you need to launch npm run build from the command prompt, or install the Webpack task runner extension in Visual Studio.

Try it. If you like it, I can make a pr.

[damienbod]

This is great, thanks, the slow loading has been annoying me for weeks. I will try it out, a pull request would be great.

Again, thanks a million, I will use this to upgrade this app. Still haven't decided if I should go with angular-cli or angular 2 with webpack, I want to compare both solutions. The angular 2 plotly solution uses angular-cli which works well. What's your opinion?

Greetings Damien

[robisim74]

Hi Damien,

angular-cli is ok, but then it uses as default SystemJS to load the app. Look at this thread where it is required the use of webpack: angular/angular-cli#909
In any case, I think SystemJS is good for development, because it allows you to debug on the browser, but not good for production.
Webpack is perfect for the production: in theory you could publish only three files: index.html, vendor.bundle for libraries and app.bundle: it creates a kind of web assembly with everything inside: javascript, css, html, and it is very fast.

[damienbod]

Thanks, webpack seems like the way to go.

[robisim74]

Damien, I see you've updated your article: https://damienbod.com/2016/04/29/angular-2-localization-with-an-asp-net-core-mvc-service. Careful: even index.html has changed, and systemjs.config.js file no longer exists.

[damienbod]

Thanks, I'll update