Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 0200489

Browse filesBrowse files
SteveSandersonMSSteveSandersonMS
committed
Update KnockoutSpa to Webpack 2 (plus awesome-typescript-loader)
1 parent cc76daf commit 0200489
Copy full SHA for 0200489

File tree

Expand file treeCollapse file tree

3 files changed

+83
-78
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

3 files changed

+83
-78
lines changed
Open diff view settings
Collapse file

‎templates/KnockoutSpa/package.json‎

Copy file name to clipboardExpand all lines: templates/KnockoutSpa/package.json
+4-4Lines 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
}
Collapse file

‎templates/KnockoutSpa/webpack.config.js‎

Copy file name to clipboard
+42-39Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
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');
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
4+
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
5+
const bundleOutputDir = './wwwroot/dist';
56

6-
var bundleOutputDir = './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-
new webpack.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-
new webpack.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-
new webpack.optimize.OccurenceOrderPlugin(),
38-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
39-
new ExtractTextPlugin('site.css')
40-
])
7+
module.exports = (env) => {
8+
const isDevBuild = !(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+
new CheckerPlugin(),
28+
new webpack.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+
new webpack.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+
new webpack.optimize.UglifyJsPlugin(),
41+
new ExtractTextPlugin('site.css')
42+
])
43+
}];
4144
};
Collapse file

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

Copy file name to clipboard
+37-35Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
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 extractCSS = new ExtractTextPlugin('vendor.css');
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const ExtractTextPlugin = 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-
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
29-
new webpack.optimize.OccurenceOrderPlugin(),
30-
new webpack.DllPlugin({
31-
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
32-
name: '[name]_[hash]'
33-
})
34-
].concat(isDevBuild ? [] : [
35-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
36-
])
5+
module.exports = (env) => {
6+
const isDevBuild = !(env && env.prod);
7+
const extractCSS = new ExtractTextPlugin('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+
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
31+
new webpack.DllPlugin({
32+
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
33+
name: '[name]_[hash]'
34+
})
35+
].concat(isDevBuild ? [] : [
36+
new webpack.optimize.UglifyJsPlugin()
37+
])
38+
}];
3739
};

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.