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 cc76daf

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

File tree

Expand file treeCollapse file tree

3 files changed

+162
-158
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

3 files changed

+162
-158
lines changed
Open diff view settings
Collapse file

‎templates/ReactReduxSpa/package.json‎

Copy file name to clipboardExpand all lines: templates/ReactReduxSpa/package.json
+7-9Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,13 @@
99
"@types/react-router": "^2.0.30",
1010
"@types/react-router-redux": "^4.0.30",
1111
"@types/redux": "3.5.27",
12-
"@types/source-map": "^0.1.28",
13-
"@types/uglify-js": "^2.0.27",
14-
"@types/webpack": "^1.12.35",
15-
"@types/webpack-env": "^1.12.1",
12+
"@types/webpack": "^2.2.0",
13+
"@types/webpack-env": "^1.13.0",
1614
"@types/whatwg-fetch": "0.0.28",
1715
"aspnet-prerendering": "^2.0.0",
18-
"aspnet-webpack": "^1.0.17",
19-
"aspnet-webpack-react": "^1.0.2",
16+
"aspnet-webpack": "^1.0.27",
17+
"aspnet-webpack-react": "^1.0.4",
18+
"awesome-typescript-loader": "3.0.0-beta.13 || ^3.0.0",
2019
"babel-core": "^6.5.2",
2120
"babel-loader": "^6.2.3",
2221
"babel-preset-es2015": "^6.5.0",
@@ -25,7 +24,7 @@
2524
"css-loader": "^0.23.1",
2625
"domain-task": "^2.0.1",
2726
"event-source-polyfill": "^0.0.7",
28-
"extract-text-webpack-plugin": "^1.0.1",
27+
"extract-text-webpack-plugin": "^2.0.0-rc",
2928
"file-loader": "^0.8.5",
3029
"jquery": "^2.2.1",
3130
"json-loader": "^0.5.4",
@@ -38,10 +37,9 @@
3837
"redux": "^3.6.0",
3938
"redux-thunk": "^2.2.0",
4039
"style-loader": "^0.13.0",
41-
"ts-loader": "^0.8.1",
4240
"typescript": "^2.0.3",
4341
"url-loader": "^0.5.7",
44-
"webpack": "^1.13.2",
42+
"webpack": "^2.2.0",
4543
"webpack-hot-middleware": "^2.12.2",
4644
"webpack-merge": "^0.14.1"
4745
}
Collapse file

‎templates/ReactReduxSpa/webpack.config.js‎

Copy file name to clipboard
+73-69Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,77 @@
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');
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 merge = require('webpack-merge');
66

7-
// Configuration in common to both client-side and server-side bundles
8-
var sharedConfig = () => ({
9-
resolve: { extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ] },
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: /\.tsx?$/, include: /ClientApp/, loader: 'babel-loader' },
17-
{ test: /\.tsx?$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
18-
{ test: /\.json$/, loader: 'json-loader' }
19-
]
20-
}
21-
});
7+
module.exports = (env) => {
8+
const isDevBuild = !(env && env.prod);
229

23-
// Configuration for client-side bundle suitable for running in browsers
24-
var clientBundleOutputDir = './wwwroot/dist';
25-
var clientBundleConfig = merge(sharedConfig(), {
26-
entry: { 'main-client': './ClientApp/boot-client.tsx' },
27-
module: {
28-
loaders: [
29-
{ test: /\.css$/, loader: ExtractTextPlugin.extract(['css-loader']) },
30-
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
31-
]
32-
},
33-
output: { path: path.join(__dirname, clientBundleOutputDir) },
34-
plugins: [
35-
new ExtractTextPlugin('site.css'),
36-
new webpack.DllReferencePlugin({
37-
context: __dirname,
38-
manifest: require('./wwwroot/dist/vendor-manifest.json')
39-
})
40-
].concat(isDevBuild ? [
41-
// Plugins that apply in development builds only
42-
new webpack.SourceMapDevToolPlugin({
43-
filename: '[file].map', // Remove this line if you prefer inline source maps
44-
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
45-
})
46-
] : [
47-
// Plugins that apply in production builds only
48-
new webpack.optimize.OccurenceOrderPlugin(),
49-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
50-
])
51-
});
10+
// Configuration in common to both client-side and server-side bundles
11+
const sharedConfig = () => ({
12+
stats: { modules: false },
13+
resolve: { extensions: [ '.js', '.jsx', '.ts', '.tsx' ] },
14+
output: {
15+
filename: '[name].js',
16+
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
17+
},
18+
module: {
19+
rules: [
20+
{ test: /\.tsx?$/, include: /ClientApp/, use: 'babel-loader' },
21+
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }
22+
]
23+
},
24+
plugins: [new CheckerPlugin()]
25+
});
5226

53-
// Configuration for server-side (prerendering) bundle suitable for running in Node
54-
var serverBundleConfig = merge(sharedConfig(), {
55-
resolve: { packageMains: ['main'] },
56-
entry: { 'main-server': './ClientApp/boot-server.tsx' },
57-
plugins: [
58-
new webpack.DllReferencePlugin({
59-
context: __dirname,
60-
manifest: require('./ClientApp/dist/vendor-manifest.json'),
61-
sourceType: 'commonjs2',
62-
name: './vendor'
63-
})
64-
],
65-
output: {
66-
libraryTarget: 'commonjs',
67-
path: path.join(__dirname, './ClientApp/dist')
68-
},
69-
target: 'node',
70-
devtool: 'inline-source-map'
71-
});
27+
// Configuration for client-side bundle suitable for running in browsers
28+
const clientBundleOutputDir = './wwwroot/dist';
29+
const clientBundleConfig = merge(sharedConfig(), {
30+
entry: { 'main-client': './ClientApp/boot-client.tsx' },
31+
module: {
32+
rules: [
33+
{ test: /\.css$/, use: ExtractTextPlugin.extract({ loader: 'css-loader' }) },
34+
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
35+
]
36+
},
37+
output: { path: path.join(__dirname, clientBundleOutputDir) },
38+
plugins: [
39+
new ExtractTextPlugin('site.css'),
40+
new webpack.DllReferencePlugin({
41+
context: __dirname,
42+
manifest: require('./wwwroot/dist/vendor-manifest.json')
43+
})
44+
].concat(isDevBuild ? [
45+
// Plugins that apply in development builds only
46+
new webpack.SourceMapDevToolPlugin({
47+
filename: '[file].map', // Remove this line if you prefer inline source maps
48+
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
49+
})
50+
] : [
51+
// Plugins that apply in production builds only
52+
new webpack.optimize.UglifyJsPlugin()
53+
])
54+
});
7255

73-
module.exports = [clientBundleConfig, serverBundleConfig];
56+
// Configuration for server-side (prerendering) bundle suitable for running in Node
57+
const serverBundleConfig = merge(sharedConfig(), {
58+
resolve: { mainFields: ['main'] },
59+
entry: { 'main-server': './ClientApp/boot-server.tsx' },
60+
plugins: [
61+
new webpack.DllReferencePlugin({
62+
context: __dirname,
63+
manifest: require('./ClientApp/dist/vendor-manifest.json'),
64+
sourceType: 'commonjs2',
65+
name: './vendor'
66+
})
67+
],
68+
output: {
69+
libraryTarget: 'commonjs',
70+
path: path.join(__dirname, './ClientApp/dist')
71+
},
72+
target: 'node',
73+
devtool: 'inline-source-map'
74+
});
75+
76+
return [clientBundleConfig, serverBundleConfig];
77+
};
Collapse file

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

Copy file name to clipboard
+82-80Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,87 @@
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' }
14-
]
15-
},
16-
entry: {
17-
vendor: [
18-
'bootstrap',
19-
'bootstrap/dist/css/bootstrap.css',
20-
'domain-task',
21-
'event-source-polyfill',
22-
'react',
23-
'react-dom',
24-
'react-router',
25-
'react-redux',
26-
'redux',
27-
'redux-thunk',
28-
'react-router-redux',
29-
'style-loader',
30-
'jquery'
31-
],
32-
},
33-
output: {
34-
publicPath: '/dist/',
35-
filename: '[name].js',
36-
library: '[name]_[hash]',
37-
},
38-
plugins: [
39-
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
40-
new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, require.resolve('node-noop')), // Workaround for https://github.com/andris9/encoding/issues/16
41-
new webpack.DefinePlugin({
42-
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
43-
})
44-
]
45-
};
6+
module.exports = (env) => {
7+
const isDevBuild = !(env && env.prod);
8+
const extractCSS = new ExtractTextPlugin('vendor.css');
469

47-
var clientBundleConfig = merge(sharedConfig, {
48-
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
49-
module: {
50-
loaders: [
51-
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
10+
const sharedConfig = {
11+
stats: { modules: false },
12+
resolve: { extensions: [ '.js' ] },
13+
module: {
14+
rules: [
15+
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
16+
]
17+
},
18+
entry: {
19+
vendor: [
20+
'bootstrap',
21+
'bootstrap/dist/css/bootstrap.css',
22+
'domain-task',
23+
'event-source-polyfill',
24+
'react',
25+
'react-dom',
26+
'react-router',
27+
'react-redux',
28+
'redux',
29+
'redux-thunk',
30+
'react-router-redux',
31+
'style-loader',
32+
'jquery'
33+
],
34+
},
35+
output: {
36+
publicPath: '/dist/',
37+
filename: '[name].js',
38+
library: '[name]_[hash]',
39+
},
40+
plugins: [
41+
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
42+
new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, require.resolve('node-noop')), // Workaround for https://github.com/andris9/encoding/issues/16
43+
new webpack.DefinePlugin({
44+
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
45+
})
5246
]
53-
},
54-
plugins: [
55-
extractCSS,
56-
new webpack.DllPlugin({
57-
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
58-
name: '[name]_[hash]'
59-
})
60-
].concat(isDevBuild ? [] : [
61-
new webpack.optimize.OccurenceOrderPlugin(),
62-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
63-
])
64-
});
47+
};
6548

66-
var serverBundleConfig = merge(sharedConfig, {
67-
target: 'node',
68-
resolve: { packageMains: ['main'] },
69-
output: {
70-
path: path.join(__dirname, 'ClientApp', 'dist'),
71-
libraryTarget: 'commonjs2',
72-
},
73-
module: {
74-
loaders: [ { test: /\.css(\?|$)/, loader: 'css-loader' } ]
75-
},
76-
entry: { vendor: ['aspnet-prerendering', 'react-dom/server'] },
77-
plugins: [
78-
new webpack.DllPlugin({
79-
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
80-
name: '[name]_[hash]'
81-
})
82-
]
83-
});
49+
const clientBundleConfig = merge(sharedConfig, {
50+
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
51+
module: {
52+
rules: [
53+
{ test: /\.css(\?|$)/, use: extractCSS.extract({ loader: 'css-loader' }) }
54+
]
55+
},
56+
plugins: [
57+
extractCSS,
58+
new webpack.DllPlugin({
59+
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
60+
name: '[name]_[hash]'
61+
})
62+
].concat(isDevBuild ? [] : [
63+
new webpack.optimize.UglifyJsPlugin()
64+
])
65+
});
8466

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

0 commit comments

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