Skip to content

Commit ef6968d

Browse files
SteveSandersonMSSteveSandersonMS
committed
Update ReactSpa to Webpack 2 (plus awesome-typescript-loader)
1 parent 1927d38 commit ef6968d

File tree

3 files changed

+87
-83
lines changed

3 files changed

+87
-83
lines changed

‎templates/ReactSpa/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,17 @@
77
"@types/react": "^0.14.38",
88
"@types/react-dom": "^0.14.17",
99
"@types/react-router": "^2.0.38",
10-
"aspnet-webpack": "^1.0.17",
11-
"aspnet-webpack-react": "^1.0.2",
10+
"aspnet-webpack": "^1.0.27",
11+
"aspnet-webpack-react": "^1.0.4",
12+
"awesome-typescript-loader": "3.0.0-beta.13 || ^3.0.0",
1213
"babel-core": "^6.17.0",
1314
"babel-loader": "^6.2.5",
1415
"babel-preset-es2015": "^6.16.0",
1516
"babel-preset-react": "^6.16.0",
1617
"bootstrap": "^3.3.6",
1718
"css-loader": "^0.25.0",
1819
"event-source-polyfill": "^0.0.7",
19-
"extract-text-webpack-plugin": "^1.0.1",
20+
"extract-text-webpack-plugin": "^2.0.0-rc",
2021
"file-loader": "^0.9.0",
2122
"isomorphic-fetch": "^2.2.1",
2223
"jquery": "^2.2.1",
@@ -25,10 +26,9 @@
2526
"react-dom": "^15.3.2",
2627
"react-router": "^2.8.1",
2728
"style-loader": "^0.13.1",
28-
"ts-loader": "^0.8.2",
2929
"typescript": "^2.0.3",
3030
"url-loader": "^0.5.7",
31-
"webpack": "^1.13.2",
31+
"webpack": "^2.2.0",
3232
"webpack-hot-middleware": "^2.12.2"
3333
}
3434
}

‎templates/ReactSpa/webpack.config.js‎

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

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

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
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', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', '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-
new webpack.DefinePlugin({
35-
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
36-
})
37-
].concat(isDevBuild ? [] : [
38-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
39-
])
5+
module.exports = (env) => {
6+
const extractCSS = new ExtractTextPlugin('vendor.css');
7+
const isDevBuild = !(env && env.prod);
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(['css-loader']) }
17+
]
18+
},
19+
entry: {
20+
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', '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+
new webpack.DefinePlugin({
36+
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
37+
})
38+
].concat(isDevBuild ? [] : [
39+
new webpack.optimize.UglifyJsPlugin()
40+
])
41+
}];
4042
};

0 commit comments

Comments
 (0)