Skip to content

Commit 6ed34dd

Browse files
SteveSandersonMSSteveSandersonMS
committed
Update KnockoutSpa to Webpack 2 (plus awesome-typescript-loader)
1 parent 9f7bc75 commit 6ed34dd

File tree

3 files changed

+83
-78
lines changed

3 files changed

+83
-78
lines changed

‎templates/KnockoutSpa/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@
1212
"@types/requirejs": "^2.1.26",
1313
"@types/signals": "0.0.16",
1414
"@types/whatwg-fetch": "0.0.30",
15-
"aspnet-webpack": "^1.0.17",
15+
"aspnet-webpack": "^1.0.27",
16+
"awesome-typescript-loader": "3.0.0-beta.13 || ^3.0.0",
1617
"bootstrap": "^3.3.6",
1718
"bundle-loader": "^0.5.4",
1819
"crossroads": "^0.12.2",
1920
"css-loader": "^0.25.0",
2021
"event-source-polyfill": "^0.0.7",
21-
"extract-text-webpack-plugin": "^1.0.1",
22+
"extract-text-webpack-plugin": "^2.0.0-rc",
2223
"file-loader": "^0.9.0",
2324
"history": "^4.3.0",
2425
"isomorphic-fetch": "^2.2.1",
@@ -27,10 +28,9 @@
2728
"knockout": "^3.4.0",
2829
"raw-loader": "^0.5.1",
2930
"style-loader": "^0.13.1",
30-
"ts-loader": "^0.8.2",
3131
"typescript": "^2.0.3",
3232
"url-loader": "^0.5.7",
33-
"webpack": "^1.13.2",
33+
"webpack": "^2.2.0",
3434
"webpack-hot-middleware": "^2.12.2"
3535
}
3636
}

‎templates/KnockoutSpa/webpack.config.js‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
1-
varisDevBuild=process.argv.indexOf('--env.prod')<0;
2-
varpath=require('path');
3-
varwebpack=require('webpack');
4-
varExtractTextPlugin=require('extract-text-webpack-plugin');
1+
constpath=require('path');
2+
constwebpack=require('webpack');
3+
constExtractTextPlugin=require('extract-text-webpack-plugin');
4+
constCheckerPlugin=require('awesome-typescript-loader').CheckerPlugin;
5+
constbundleOutputDir='./wwwroot/dist';
56

6-
varbundleOutputDir='./wwwroot/dist';
7-
module.exports={
8-
entry: {'main': './ClientApp/boot.ts'},
9-
resolve: {extensions: ['','.js','.ts']},
10-
output: {
11-
path: path.join(__dirname,bundleOutputDir),
12-
filename: '[name].js',
13-
publicPath: '/dist/'
14-
},
15-
module: {
16-
loaders: [
17-
{test: /\.ts$/,include: /ClientApp/,loader: 'ts-loader',query: {silent: true}},
18-
{test: /\.html$/,loader: 'raw-loader'},
19-
{test: /\.css$/,loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract(['css-loader'])},
20-
{test: /\.(png|jpg|jpeg|gif|svg)$/,loader: 'url-loader',query: {limit: 25000}},
21-
{test: /\.json$/,loader: 'json-loader'}
22-
]
23-
},
24-
plugins: [
25-
newwebpack.DllReferencePlugin({
26-
context: __dirname,
27-
manifest: require('./wwwroot/dist/vendor-manifest.json')
28-
})
29-
].concat(isDevBuild ? [
30-
// Plugins that apply in development builds only
31-
newwebpack.SourceMapDevToolPlugin({
32-
filename: '[file].map',// Remove this line if you prefer inline source maps
33-
moduleFilenameTemplate: path.relative(bundleOutputDir,'[resourcePath]')// Point sourcemap entries to the original file locations on disk
34-
})
35-
] : [
36-
// Plugins that apply in production builds only
37-
newwebpack.optimize.OccurenceOrderPlugin(),
38-
newwebpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),
39-
newExtractTextPlugin('site.css')
40-
])
7+
module.exports=(env)=>{
8+
constisDevBuild=!(env&&env.prod);
9+
return[{
10+
stats: {modules: false},
11+
entry: {'main': './ClientApp/boot.ts'},
12+
resolve: {extensions: ['.js','.ts']},
13+
output: {
14+
path: path.join(__dirname,bundleOutputDir),
15+
filename: '[name].js',
16+
publicPath: '/dist/'
17+
},
18+
module: {
19+
rules: [
20+
{test: /\.ts$/,include: /ClientApp/,use: 'awesome-typescript-loader?silent=true'},
21+
{test: /\.html$/,loader: 'raw-loader'},
22+
{test: /\.css$/,loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract({loader: 'css-loader'})},
23+
{test: /\.(png|jpg|jpeg|gif|svg)$/,loader: 'url-loader?limit=25000'}
24+
]
25+
},
26+
plugins: [
27+
newCheckerPlugin(),
28+
newwebpack.DllReferencePlugin({
29+
context: __dirname,
30+
manifest: require('./wwwroot/dist/vendor-manifest.json')
31+
})
32+
].concat(isDevBuild ? [
33+
// Plugins that apply in development builds only
34+
newwebpack.SourceMapDevToolPlugin({
35+
filename: '[file].map',// Remove this line if you prefer inline source maps
36+
moduleFilenameTemplate: path.relative(bundleOutputDir,'[resourcePath]')// Point sourcemap entries to the original file locations on disk
37+
})
38+
] : [
39+
// Plugins that apply in production builds only
40+
newwebpack.optimize.UglifyJsPlugin(),
41+
newExtractTextPlugin('site.css')
42+
])
43+
}];
4144
};

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

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
1-
varisDevBuild=process.argv.indexOf('--env.prod')<0;
2-
varpath=require('path');
3-
varwebpack=require('webpack');
4-
varExtractTextPlugin=require('extract-text-webpack-plugin');
5-
varextractCSS=newExtractTextPlugin('vendor.css');
1+
constpath=require('path');
2+
constwebpack=require('webpack');
3+
constExtractTextPlugin=require('extract-text-webpack-plugin');
64

7-
module.exports={
8-
resolve: {
9-
extensions: ['','.js']
10-
},
11-
module: {
12-
loaders: [
13-
{test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/,loader: 'url-loader?limit=100000'},
14-
{test: /\.css(\?|$)/,loader: extractCSS.extract(['css-loader'])}
15-
]
16-
},
17-
entry: {
18-
vendor: ['bootstrap','bootstrap/dist/css/bootstrap.css','knockout','crossroads','event-source-polyfill','history','isomorphic-fetch','style-loader','jquery'],
19-
},
20-
output: {
21-
path: path.join(__dirname,'wwwroot','dist'),
22-
publicPath: '/dist/',
23-
filename: '[name].js',
24-
library: '[name]_[hash]',
25-
},
26-
plugins: [
27-
extractCSS,
28-
newwebpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'}),// Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
29-
newwebpack.optimize.OccurenceOrderPlugin(),
30-
newwebpack.DllPlugin({
31-
path: path.join(__dirname,'wwwroot','dist','[name]-manifest.json'),
32-
name: '[name]_[hash]'
33-
})
34-
].concat(isDevBuild ? [] : [
35-
newwebpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
36-
])
5+
module.exports=(env)=>{
6+
constisDevBuild=!(env&&env.prod);
7+
constextractCSS=newExtractTextPlugin('vendor.css');
8+
return[{
9+
stats: {modules: false},
10+
resolve: {
11+
extensions: ['.js']
12+
},
13+
module: {
14+
rules: [
15+
{test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/,use: 'url-loader?limit=100000'},
16+
{test: /\.css(\?|$)/,use: extractCSS.extract({loader: 'css-loader'})}
17+
]
18+
},
19+
entry: {
20+
vendor: ['bootstrap','bootstrap/dist/css/bootstrap.css','knockout','crossroads','event-source-polyfill','history','isomorphic-fetch','style-loader','jquery'],
21+
},
22+
output: {
23+
path: path.join(__dirname,'wwwroot','dist'),
24+
publicPath: '/dist/',
25+
filename: '[name].js',
26+
library: '[name]_[hash]',
27+
},
28+
plugins: [
29+
extractCSS,
30+
newwebpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'}),// Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
31+
newwebpack.DllPlugin({
32+
path: path.join(__dirname,'wwwroot','dist','[name]-manifest.json'),
33+
name: '[name]_[hash]'
34+
})
35+
].concat(isDevBuild ? [] : [
36+
newwebpack.optimize.UglifyJsPlugin()
37+
])
38+
}];
3739
};

0 commit comments

Comments
(0)