Skip to content

Commit 9b8df01

Browse files
calvinlcalvinl
authored
Merge pull request #24 from combine/feature/webpack2
Add support for webpack 2 (beta.27)
2 parents 4973cf2 + 6643aa1 commit 9b8df01

File tree

9 files changed

+594
-446
lines changed

9 files changed

+594
-446
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"redux-devtools": "3.3.1",
4343
"redux-devtools-dock-monitor": "1.1.1",
4444
"redux-devtools-log-monitor": "1.1.1",
45-
"webpack-dev-server": "1.16.2",
45+
"webpack-dev-server": "2.1.0-beta.11",
4646
"webpack-sources": "0.1.2"
4747
},
4848
"dependencies": {
@@ -71,7 +71,7 @@
7171
"css-modules-require-hook": "4.0.5",
7272
"expose-loader": "0.7.1",
7373
"express": "4.14.0",
74-
"extract-text-webpack-plugin": "1.0.1",
74+
"extract-text-webpack-plugin": "2.0.0-beta.4",
7575
"file-loader": "0.9.0",
7676
"font-awesome": "4.7.0",
7777
"history": "4.4.0",
@@ -95,7 +95,7 @@
9595
"serve-static": "1.11.1",
9696
"style-loader": "0.13.1",
9797
"url-loader": "0.5.7",
98-
"webpack": "1.13.3",
98+
"webpack": "2.1.0-beta.27",
9999
"webpack-isomorphic-tools": "2.6.4"
100100
}
101101
}

‎postcss.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const autoprefixer = require('autoprefixer');
2+
3+
module.exports = {
4+
plugins: [autoprefixer]
5+
};

‎server/server.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,6 @@ app.listen(port, (error) => {
9999
if (error) {
100100
console.error(error);
101101
} else {
102-
console.info(`🌎 Application server listening on port ${port}.`);
102+
console.info(`Application server mounted locally on port ${port}.`);
103103
}
104104
});

‎webpack/base.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import mapValues from 'lodash/mapValues';
44
import autoprefixer from 'autoprefixer';
55
import isomorphicConfig from './isomorphic';
66
import IsomorphicPlugin from 'webpack-isomorphic-tools/plugin';
7-
import { OUTPUT_PATH, ASSET_HOST, RESOLVE_PATHS } from './config';
7+
import { OUTPUT_PATH, ASSET_HOST, RESOLVE_PATHS } from './constants';
88

99
const isDev = process.env.NODE_ENV === 'development';
1010
const isomorphicPlugin = new IsomorphicPlugin(isomorphicConfig).development(isDev);
@@ -36,36 +36,40 @@ export default {
3636
publicPath: ASSET_HOST
3737
},
3838
resolve: {
39-
extensions: ['', '.js', '.jsx', '.scss'],
39+
extensions: ['.js', '.jsx', '.scss'],
4040
alias: mapValues(RESOLVE_PATHS, (str) => (
4141
path.join(process.cwd(), ...str.split('/'))
4242
))
4343
},
4444
module: {
45-
preLoaders: [
45+
rules: [
4646
{
47+
enforce: 'pre',
4748
test: /\.jsx$|\.js$/,
48-
loader: 'eslint-loader',
49-
exclude: /node_modules/
50-
}
51-
],
52-
loaders: [
49+
exclude: /node_modules/,
50+
use: [
51+
{
52+
loader: 'eslint-loader',
53+
options: {
54+
configFile: './.eslintrc',
55+
}
56+
}
57+
]
58+
},
5359
{
5460
test: /\.json$/,
55-
loader: 'json'
61+
loader: 'json-loader'
5662
},
5763
{
5864
test: isomorphicPlugin.regular_expression('images'),
5965
loader: 'url-loader?limit=10240'
6066
},
6167
{
62-
// test: /\.(woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]*)?$/,
6368
test: /\.(ttf|eot|svg|jpe?g|png|gif|ico|woff2?)$/,
64-
loader: 'file'
69+
loader: 'file-loader'
6570
}
6671
]
6772
},
68-
postcss: [autoprefixer],
6973
plugins: [
7074
isomorphicPlugin,
7175
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|es/),

‎webpack/config.js‎ renamed to ‎webpack/constants.js‎

File renamed without changes.

‎webpack/development.hot.js‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable no-console */
2-
import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './config';
2+
import { DEV_SERVER_PORT, DEV_SERVER_HOSTNAME, DEV_SERVER_HOST_URL } from './constants';
33
import WebpackDevServer from 'webpack-dev-server';
44
import webpack from 'webpack';
55
import baseConfig from './base';
@@ -13,33 +13,47 @@ const entry = [
1313

1414
// Additional plugins
1515
const plugins = [
16-
new webpack.optimize.OccurenceOrderPlugin(),
1716
new webpack.HotModuleReplacementPlugin(),
18-
new webpack.NoErrorsPlugin()
17+
new webpack.NoErrorsPlugin(),
18+
new webpack.NamedModulesPlugin()
1919
];
2020

2121
// Additional loaders
2222
const loaders = [
2323
{
2424
test: /\.css$/,
25-
loaders: [
26-
'style',
27-
`css?modules&importLoaders=3&localIdentName=${packageJson.config.css}`,
28-
'postcss',
29-
],
25+
use: [
26+
'style-loader',
27+
{
28+
loader: 'css-loader',
29+
options: {
30+
modules: true,
31+
importLoaders: 3,
32+
localIdentName: packageJson.config.css
33+
}
34+
},
35+
'postcss-loader'
36+
]
3037
},
3138
{
3239
test: /\.scss$/,
33-
loaders: [
34-
'style',
35-
`css?modules&importLoaders=3&localIdentName=${packageJson.config.css}`,
36-
'postcss',
37-
'sass'
40+
use: [
41+
'style-loader',
42+
{
43+
loader: 'css-loader',
44+
options: {
45+
modules: true,
46+
importLoaders: 3,
47+
localIdentName: packageJson.config.css
48+
}
49+
},
50+
'postcss-loader',
51+
'sass-loader'
3852
]
3953
},
4054
{
4155
test: /\.jsx$|\.js$/,
42-
loader: 'babel',
56+
loader: 'babel-loader',
4357
exclude: /node_modules/,
4458
// use react-transform to hot reload modules when hot is specified
4559
query: {
@@ -60,8 +74,6 @@ const loaders = [
6074
];
6175

6276
const config = Object.assign({}, baseConfig, {
63-
eslint: { configFile: './.eslintrc' },
64-
devServerPort: DEV_SERVER_PORT,
6577
devtool: 'eval',
6678
entry: Object.assign({}, baseConfig.entry, {
6779
app: [
@@ -74,8 +86,8 @@ const config = Object.assign({}, baseConfig, {
7486
...plugins
7587
],
7688
module: Object.assign({}, baseConfig.module, {
77-
loaders: [
78-
...baseConfig.module.loaders,
89+
rules: [
90+
...baseConfig.module.rules,
7991
...loaders
8092
]
8193
})
@@ -84,6 +96,7 @@ const config = Object.assign({}, baseConfig, {
8496
console.info('Firing up Webpack dev server...');
8597

8698
new WebpackDevServer(webpack(config), {
99+
port: DEV_SERVER_PORT,
87100
publicPath: config.output.publicPath,
88101
hot: true,
89102
historyApiFallback: true,
@@ -101,6 +114,6 @@ new WebpackDevServer(webpack(config), {
101114
if (err) {
102115
console.error(err);
103116
} else {
104-
console.info('🚧 Webpack client dev-server listening on ' + DEV_SERVER_HOST_URL + ' with publicPath:' + config.output.publicPath);
117+
console.info(`Webpack dev server mounted at ${DEV_SERVER_HOST_URL}. Asset path: ${config.output.publicPath}`);
105118
}
106119
});

‎webpack/development.js‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,36 @@ const loaders = [
1313
exclude: /node_modules/
1414
},
1515
{
16-
test: /\.css$/,
17-
loader: ExtractTextPlugin.extract(
18-
'style',
19-
`css?minimize&modules&importLoaders=1&localIdentName=${packageJson.config.css}` +
20-
'!postcss'
21-
)
22-
},
23-
{
24-
test: /\.scss$/,
25-
loader: ExtractTextPlugin.extract(
26-
'style',
27-
`css?minimize&modules&importLoaders=1&localIdentName=${packageJson.config.css}` +
28-
'!postcss' +
29-
'!sass'
30-
)
16+
test: /\.(css|scss)$/,
17+
loader: ExtractTextPlugin.extract({
18+
fallbackLoader: 'style-loader',
19+
loader: [
20+
{
21+
loader: 'css-loader',
22+
options: {
23+
modules: true,
24+
minimize: false,
25+
importLoaders: 1,
26+
localIdentName: packageJson.config.css
27+
}
28+
},
29+
{ loader: 'postcss-loader' },
30+
{ loader: 'sass-loader' }
31+
]
32+
})
3133
}
3234
];
3335

3436
export default {
3537
...baseConfig,
36-
eslint: { configFile: './.eslintrc' },
3738
devtool: 'source-map',
3839
plugins: [
3940
...baseConfig.plugins,
4041
...plugins
4142
],
4243
module: Object.assign({}, baseConfig.module, {
43-
loaders: [
44-
...baseConfig.module.loaders,
44+
rules: [
45+
...baseConfig.module.rules,
4546
...loaders
4647
]
4748
})

‎webpack/production.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,25 @@ const plugins = [
2222
})
2323
];
2424

25-
const loaders = [{
26-
test: /\.scss$/,
27-
loader: ExtractTextPlugin.extract('css!sass')
28-
}, {
29-
test: /\.js$/,
30-
loaders: ['babel'],
31-
exclude: /node_modules/
32-
}];
25+
const loaders = [
26+
{
27+
test: /\.scss$/,
28+
loader: ExtractTextPlugin.extract({
29+
fallbackLoader: 'style-loader',
30+
loader: [
31+
{ loader: 'css-loader' },
32+
{ loader: 'postcss-loader' },
33+
{ loader: 'sass-loader' }
34+
]
35+
})
36+
},
37+
{
38+
test: /\.js$/,
39+
loader: 'babel-loader',
40+
rules: ['babel'],
41+
exclude: /node_modules/
42+
}
43+
];
3344

3445
export default {
3546
...baseConfig,
@@ -41,8 +52,8 @@ export default {
4152
...plugins
4253
],
4354
module: Object.assign({}, baseConfig.module, {
44-
loaders: [
45-
...baseConfig.module.loaders,
55+
rules: [
56+
...baseConfig.module.rules,
4657
...loaders
4758
]
4859
})

0 commit comments

Comments
 (0)