Angular 2 Angular2 using webpack Angular 2 webpack setup
Example
webpack.config.js
const webpack = require("webpack")
const helpers = require('./helpers')
const path = require("path")
const WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
// set entry point for your app module
"entry": {
"app": helpers.root("app/main.module.ts"),
},
// output files to dist folder
"output": {
"filename": "[name].js",
"path": helpers.root("dist"),
"publicPath": "/",
},
"resolve": {
"extensions": ['.ts', '.js'],
},
"module": {
"rules": [
{
"test": /\.ts$/,
"loaders": [
{
"loader": 'awesome-typescript-loader',
"options": {
"configFileName": helpers.root("./tsconfig.json")
}
},
"angular2-template-loader"
]
},
],
},
"plugins": [
// notify when build is complete
new WebpackNotifierPlugin({title: "build complete"}),
// get reference for shims
new webpack.DllReferencePlugin({
"context": helpers.root("src/app"),
"manifest": helpers.root("config/polyfills-manifest.json")
}),
// get reference of vendor DLL
new webpack.DllReferencePlugin({
"context": helpers.root("src/app"),
"manifest": helpers.root("config/vendor-manifest.json")
}),
// minify compiled js
new webpack.optimize.UglifyJsPlugin(),
],
}
vendor.config.js
const webpack = require("webpack")
const helpers = require('./helpers')
const path = require("path")
module.exports = {
// specify vendor file where all vendors are imported
"entry": {
// optionally add your shims as well
"polyfills": [helpers.root("src/app/shims.ts")],
"vendor": [helpers.root("src/app/vendor.ts")],
},
// output vendor to dist
"output": {
"filename": "[name].js",
"path": helpers.root("dist"),
"publicPath": "/",
"library": "[name]"
},
"resolve": {
"extensions": ['.ts', '.js'],
},
"module": {
"rules": [
{
"test": /\.ts$/,
"loaders": [
{
"loader": 'awesome-typescript-loader',
"options": {
"configFileName": helpers.root("./tsconfig.json")
}
},
]
},
],
},
"plugins": [
// create DLL for entries
new webpack.DllPlugin({
"name": "[name]",
"context": helpers.root("src/app"),
"path": helpers.root("config/[name]-manifest.json")
}),
// minify generated js
new webpack.optimize.UglifyJsPlugin(),
],
}
helpers.js
var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
}
exports.root = root;
vendor.ts
import "@angular/platform-browser"
import "@angular/platform-browser-dynamic"
import "@angular/core"
import "@angular/common"
import "@angular/http"
import "@angular/router"
import "@angular/forms"
import "rxjs"
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 webpack</title>
<script src="/dist/vendor.js" type="text/javascript"></script>
<script src="/dist/app.js" type="text/javascript"></script>
</head>
<body>
<app>loading...</app>
</body>
</html>
package.json
{
"name": "webpack example",
"version": "0.0.0",
"description": "webpack",
"scripts": {
"build:webpack": "webpack --config config/webpack.config.js",
"build:vendor": "webpack --config config/vendor.config.js",
"watch": "webpack --config config/webpack.config.js --watch"
},
"devDependencies": {
"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/core": "2.4.7",
"@angular/forms": "2.4.7",
"@angular/http": "2.4.7",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
"@angular/router": "3.4.7",
"webpack": "^2.2.1",
"awesome-typescript-loader": "^3.1.2",
},
"dependencies": {
}
}
