Skip to content

Commit be3fb6e

Browse files
SteveSandersonMSSteveSandersonMS
committed
Update Angular2Spa to Webpack 2 (plus awesome-typescript-loader for improved build speed)
1 parent d69b65e commit be3fb6e

File tree

3 files changed

+153
-151
lines changed

3 files changed

+153
-151
lines changed

‎templates/Angular2Spa/package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,27 @@
2121
"angular2-universal-polyfills": "~2.0.11",
2222
"aspnet-prerendering": "^2.0.0",
2323
"aspnet-webpack": "^1.0.17",
24+
"awesome-typescript-loader": "3.0.0-beta.13 || ^3.0.0",
2425
"bootstrap": "^3.3.7",
2526
"css": "^2.2.1",
2627
"css-loader": "^0.25.0",
2728
"es6-shim": "^0.35.1",
2829
"event-source-polyfill": "^0.0.7",
2930
"expose-loader": "^0.7.1",
30-
"extract-text-webpack-plugin": "^1.0.1",
31+
"extract-text-webpack-plugin": "^2.0.0-rc",
3132
"file-loader": "^0.9.0",
3233
"html-loader": "^0.4.4",
3334
"isomorphic-fetch": "^2.2.1",
3435
"jquery": "^2.2.1",
3536
"json-loader": "^0.5.4",
36-
"node-noop": "^1.0.0",
3737
"preboot": "^4.5.2",
3838
"raw-loader": "^0.5.1",
3939
"rxjs": "5.0.0-beta.12",
4040
"style-loader": "^0.13.1",
4141
"to-string-loader": "^1.1.5",
42-
"ts-loader": "^0.8.2",
4342
"typescript": "^2.0.3",
4443
"url-loader": "^0.5.7",
45-
"webpack": "^1.13.2",
44+
"webpack": "^2.2.0",
4645
"webpack-hot-middleware": "^2.12.2",
4746
"webpack-merge": "^0.14.1",
4847
"zone.js": "^0.6.25"

‎templates/Angular2Spa/webpack.config.js‎

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,71 @@
1-
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
2-
var path = require('path');
3-
var webpack = require('webpack');
4-
var merge = require('webpack-merge');
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const merge = require('webpack-merge');
4+
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
55

6-
// Configuration in common to both client-side and server-side bundles
7-
var sharedConfig = {
8-
context: __dirname,
9-
resolve: { extensions: [ '', '.js', '.ts' ] },
10-
output: {
11-
filename: '[name].js',
12-
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
13-
},
14-
module: {
15-
loaders: [
16-
{ test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader'] },
17-
{ test: /\.html$/, loader: 'html-loader?minimize=false' },
18-
{ test: /\.css$/, loader: 'to-string-loader!css-loader' },
19-
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
20-
{ test: /\.json$/, loader: 'json-loader' }
21-
]
22-
}
23-
};
6+
module.exports = (env) => {
7+
// Configuration in common to both client-side and server-side bundles
8+
const isDevBuild = !(env && env.prod);
9+
const sharedConfig = {
10+
stats: { modules: false },
11+
context: __dirname,
12+
resolve: { extensions: [ '.js', '.ts' ] },
13+
output: {
14+
filename: '[name].js',
15+
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
16+
},
17+
module: {
18+
rules: [
19+
{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
20+
{ test: /\.html$/, use: 'html-loader?minimize=false' },
21+
{ test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
22+
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
23+
]
24+
},
25+
plugins: [new CheckerPlugin()]
26+
};
2427

25-
// Configuration for client-side bundle suitable for running in browsers
26-
var clientBundleOutputDir = './wwwroot/dist';
27-
var clientBundleConfig = merge(sharedConfig, {
28-
entry: { 'main-client': './ClientApp/boot-client.ts' },
29-
output: { path: path.join(__dirname, clientBundleOutputDir) },
30-
plugins: [
31-
new webpack.DllReferencePlugin({
32-
context: __dirname,
33-
manifest: require('./wwwroot/dist/vendor-manifest.json')
34-
})
35-
].concat(isDevBuild ? [
36-
// Plugins that apply in development builds only
37-
new webpack.SourceMapDevToolPlugin({
38-
filename: '[file].map', // Remove this line if you prefer inline source maps
39-
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
40-
})
41-
] : [
42-
// Plugins that apply in production builds only
43-
new webpack.optimize.OccurenceOrderPlugin(),
44-
new webpack.optimize.UglifyJsPlugin()
45-
])
46-
});
28+
// Configuration for client-side bundle suitable for running in browsers
29+
const clientBundleOutputDir = './wwwroot/dist';
30+
const clientBundleConfig = merge(sharedConfig, {
31+
entry: { 'main-client': './ClientApp/boot-client.ts' },
32+
output: { path: path.join(__dirname, clientBundleOutputDir) },
33+
plugins: [
34+
new webpack.DllReferencePlugin({
35+
context: __dirname,
36+
manifest: require('./wwwroot/dist/vendor-manifest.json')
37+
})
38+
].concat(isDevBuild ? [
39+
// Plugins that apply in development builds only
40+
new webpack.SourceMapDevToolPlugin({
41+
filename: '[file].map', // Remove this line if you prefer inline source maps
42+
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
43+
})
44+
] : [
45+
// Plugins that apply in production builds only
46+
new webpack.optimize.UglifyJsPlugin()
47+
])
48+
});
4749

48-
// Configuration for server-side (prerendering) bundle suitable for running in Node
49-
var serverBundleConfig = merge(sharedConfig, {
50-
resolve: { packageMains: ['main'] },
51-
entry: { 'main-server': './ClientApp/boot-server.ts' },
52-
plugins: [
53-
new webpack.DllReferencePlugin({
54-
context: __dirname,
55-
manifest: require('./ClientApp/dist/vendor-manifest.json'),
56-
sourceType: 'commonjs2',
57-
name: './vendor'
58-
})
59-
],
60-
output: {
61-
libraryTarget: 'commonjs',
62-
path: path.join(__dirname, './ClientApp/dist')
63-
},
64-
target: 'node',
65-
devtool: 'inline-source-map'
66-
});
50+
// Configuration for server-side (prerendering) bundle suitable for running in Node
51+
const serverBundleConfig = merge(sharedConfig, {
52+
resolve: { mainFields: ['main'] },
53+
entry: { 'main-server': './ClientApp/boot-server.ts' },
54+
plugins: [
55+
new webpack.DllReferencePlugin({
56+
context: __dirname,
57+
manifest: require('./ClientApp/dist/vendor-manifest.json'),
58+
sourceType: 'commonjs2',
59+
name: './vendor'
60+
})
61+
],
62+
output: {
63+
libraryTarget: 'commonjs',
64+
path: path.join(__dirname, './ClientApp/dist')
65+
},
66+
target: 'node',
67+
devtool: 'inline-source-map'
68+
});
6769

68-
module.exports = [clientBundleConfig, serverBundleConfig];
70+
return [clientBundleConfig, serverBundleConfig];
71+
};

‎templates/Angular2Spa/webpack.config.vendor.js‎

Lines changed: 83 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,88 @@
1-
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
2-
var path = require('path');
3-
var webpack = require('webpack');
4-
var ExtractTextPlugin = require('extract-text-webpack-plugin');
5-
var merge = require('webpack-merge');
6-
var extractCSS = new ExtractTextPlugin('vendor.css');
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
4+
const merge = require('webpack-merge');
75

8-
var sharedConfig = {
9-
resolve: { extensions: [ '', '.js' ] },
10-
module: {
11-
loaders: [
12-
{ test: /\.json$/, loader: require.resolve('json-loader') },
13-
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }
6+
module.exports = (env) => {
7+
const extractCSS = new ExtractTextPlugin('vendor.css');
8+
const isDevBuild = !(env && env.prod);
9+
const sharedConfig = {
10+
stats: { modules: false },
11+
resolve: { extensions: [ '.js' ] },
12+
module: {
13+
rules: [
14+
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
15+
]
16+
},
17+
entry: {
18+
vendor: [
19+
'@angular/common',
20+
'@angular/compiler',
21+
'@angular/core',
22+
'@angular/http',
23+
'@angular/platform-browser',
24+
'@angular/platform-browser-dynamic',
25+
'@angular/router',
26+
'@angular/platform-server',
27+
'angular2-universal',
28+
'angular2-universal-polyfills',
29+
'bootstrap',
30+
'bootstrap/dist/css/bootstrap.css',
31+
'es6-shim',
32+
'es6-promise',
33+
'event-source-polyfill',
34+
'jquery',
35+
'zone.js',
36+
]
37+
},
38+
output: {
39+
publicPath: '/dist/',
40+
filename: '[name].js',
41+
library: '[name]_[hash]'
42+
},
43+
plugins: [
44+
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
45+
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
46+
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
1447
]
15-
},
16-
entry: {
17-
vendor: [
18-
'@angular/common',
19-
'@angular/compiler',
20-
'@angular/core',
21-
'@angular/http',
22-
'@angular/platform-browser',
23-
'@angular/platform-browser-dynamic',
24-
'@angular/router',
25-
'@angular/platform-server',
26-
'angular2-universal',
27-
'angular2-universal-polyfills',
28-
'bootstrap',
29-
'bootstrap/dist/css/bootstrap.css',
30-
'es6-shim',
31-
'es6-promise',
32-
'event-source-polyfill',
33-
'jquery',
34-
'zone.js',
35-
]
36-
},
37-
output: {
38-
publicPath: '/dist/',
39-
filename: '[name].js',
40-
library: '[name]_[hash]'
41-
},
42-
plugins: [
43-
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
44-
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
45-
new webpack.IgnorePlugin(/^vertx$/), // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
46-
new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, require.resolve('node-noop')), // Workaround for https://github.com/andris9/encoding/issues/16
47-
]
48-
};
48+
};
4949

50-
var clientBundleConfig = merge(sharedConfig, {
51-
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
52-
module: {
53-
loaders: [
54-
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
55-
]
56-
},
57-
plugins: [
58-
extractCSS,
59-
new webpack.DllPlugin({
60-
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
61-
name: '[name]_[hash]'
62-
})
63-
].concat(isDevBuild ? [] : [
64-
new webpack.optimize.OccurenceOrderPlugin(),
65-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
66-
])
67-
});
50+
const clientBundleConfig = merge(sharedConfig, {
51+
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
52+
module: {
53+
rules: [
54+
{ test: /\.css(\?|$)/, use: extractCSS.extract({ loader: 'css-loader' }) }
55+
]
56+
},
57+
plugins: [
58+
extractCSS,
59+
new webpack.DllPlugin({
60+
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
61+
name: '[name]_[hash]'
62+
})
63+
].concat(isDevBuild ? [] : [
64+
new webpack.optimize.UglifyJsPlugin()
65+
])
66+
});
6867

69-
var serverBundleConfig = merge(sharedConfig, {
70-
target: 'node',
71-
resolve: { packageMains: ['main'] },
72-
output: {
73-
path: path.join(__dirname, 'ClientApp', 'dist'),
74-
libraryTarget: 'commonjs2',
75-
},
76-
module: {
77-
loaders: [ { test: /\.css(\?|$)/, loader: 'to-string-loader!css-loader' } ]
78-
},
79-
entry: { vendor: ['aspnet-prerendering'] },
80-
plugins: [
81-
new webpack.DllPlugin({
82-
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
83-
name: '[name]_[hash]'
84-
})
85-
]
86-
});
68+
const serverBundleConfig = merge(sharedConfig, {
69+
target: 'node',
70+
resolve: { mainFields: ['main'] },
71+
output: {
72+
path: path.join(__dirname, 'ClientApp', 'dist'),
73+
libraryTarget: 'commonjs2',
74+
},
75+
module: {
76+
rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ]
77+
},
78+
entry: { vendor: ['aspnet-prerendering'] },
79+
plugins: [
80+
new webpack.DllPlugin({
81+
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
82+
name: '[name]_[hash]'
83+
})
84+
]
85+
});
8786

88-
module.exports = [clientBundleConfig, serverBundleConfig];
87+
return [clientBundleConfig, serverBundleConfig];
88+
}

0 commit comments

Comments
 (0)