Webpack + Angular2 Workflow

wp_ng2_flow.md

Resources

Splitting bundles

Webpack + Angular2 + Typescript Workflow

Setup Project

1. Install Angular2 deps using npm
2. Try to directly use import { Stuff } from '@angular/core'

Setup Typescript

1. npm i typescript typings --save-dev
2. typings search core-js for example to find typing definitions for Core-js polyfill
3. Install typings with typings install --global --save dt~core-js for example
4. typings.json should be created at root level
5. Add to package.json a scripts.postinstall typings install
6. We can now transpile code using tsc --rootDir app --outDir dist and make a npm.script out of it

Setup Webpack (https://webpack.github.io/docs/configuration.html)

1. Webpack doesnt understand SystemJS and it needs commonjs
2. npm i webpack ts-loader --save-dev
3. create webpack.config.js it's a node module using commonjs format
4. require('webpack') and then module.exports = { [..conf..] }
5. entry: string with the entry point (eg ./src/main.ts)
6. output: out configuration object
7. output.path: out folder (eg: ./dist)
8. output.filename: complete out name
9. Since we use TS we need a loader for this, add a loader to the module object
10. module.loaders: array of loader objects
11. module.loaders[].test: regexp matching files to apply loader onto (eg /\.ts$/)
12. module.loaders[].loader: string with the name of the loader (eg ts-loader)
13. resolve.extensions: array of extensions to be loaded by webpack (eg: ['', '.js', '.ts'])
14. To start bundling webpack --progress
15. Stuff that is not explicitly imported in our file like reflect-metadata is not automatically bundled so it may be worth importing this stuff manually in our entry-point file (eg import 'zone.js/dist/zone')

Webpack Templating

1. npm i html-webpack-plugin --save-dev
2. In webpack.config.js you can require('html-webpack-plugin')
3. plugins: array of * containing plugin configuration
4. new Plugin({ template: './src/index.html' })
5. Now you can avoid manually including the bundle in the index.html

Webpack Optimizations

1. webpack --progress -p produces a production build

Webpack DevServer

1. npm install --save-dev webpack-dev-server
2. webpack-dev-server --progress --inline inline allows auto-reload, there are other ways