Skip to content

Commit ba0f20c

Browse files
stylesuxxsthzg
stylesuxx
authored and
sthzg
committed
V2 -- Updated Dependencies, Webpack, Hot reloader (#72)
* Updated dependencies, updated webpack config * Introduced react-hot-loader v3.0.0 beta * Updated webpack config to new "style", there might still be some issues with the css related loaders, we will see in the generator. * #60 I have not encountered this problem during testing * Added fs require * Moved react-hot-loader to regular dependecies
1 parent 24528b6 commit ba0f20c

File tree

7 files changed

+126
-72
lines changed

7 files changed

+126
-72
lines changed

‎.babelrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
],
77
"plugins": [
88
"transform-decorators-legacy",
9-
"transform-object-rest-spread"
9+
"transform-object-rest-spread",
10+
"react-hot-loader/babel"
1011
],
1112
"env": {
1213
"test": {

‎conf/webpack/Base.js‎

Lines changed: 74 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,14 @@ class WebpackBaseConfig {
6969
* @return {Object}
7070
*/
7171
get defaultSettings() {
72+
const cssModulesQuery = {
73+
modules: true,
74+
importLoaders: 1,
75+
localIdentName: '[name]-[local]-[hash:base64:5]'
76+
};
77+
7278
return {
7379
context: this.srcPathAbsolute,
74-
debug: false,
7580
devtool: 'eval',
7681
devServer: {
7782
contentBase: './src/',
@@ -81,93 +86,110 @@ class WebpackBaseConfig {
8186
inline: true,
8287
port: 8000
8388
},
84-
entry: './client.js',
89+
entry: './index.js',
8590
module: {
86-
preLoaders: [
91+
rules: [
8792
{
88-
test: /\.(js|jsx)$/,
93+
enforce: 'pre',
94+
test: /\.js?$/,
8995
include: this.srcPathAbsolute,
90-
loader: 'eslint'
91-
}
92-
],
93-
loaders: [
94-
{
95-
test: /\.cssmodule\.css$/,
96-
loaders: [
97-
'style',
98-
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
99-
]
96+
loader: 'babel-loader',
97+
query: {
98+
presets: ['es2015']
99+
}
100100
},
101101
{
102102
test: /^.((?!cssmodule).)*\.css$/,
103103
loaders: [
104-
'style',
105-
'css'
104+
{ loader: 'style-loader' },
105+
{ loader: 'css-loader' }
106106
]
107107
},
108108
{
109-
test: /\.cssmodule\.(sass|scss)$/,
110-
loaders: [
111-
'style',
112-
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
113-
'sass'
114-
]
109+
test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
110+
loader: 'file-loader'
115111
},
116112
{
117113
test: /^.((?!cssmodule).)*\.(sass|scss)$/,
118114
loaders: [
119-
'style',
120-
'css',
121-
'sass'
115+
{ loader: 'style-loader' },
116+
{ loader: 'css-loader' },
117+
{ loader: 'sass-loader' }
122118
]
123119
},
124120
{
125-
test: /\.cssmodule\.less$/,
121+
test: /^.((?!cssmodule).)*\.less$/,
126122
loaders: [
127-
'style',
128-
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
129-
'less'
123+
{ loader: 'style-loader' },
124+
{ loader: 'css-loader' },
125+
{ loader: 'less-loader' }
130126
]
131127
},
132128
{
133-
test: /^.((?!cssmodule).)*\.less$/,
129+
test: /^.((?!cssmodule).)*\.styl$/,
134130
loaders: [
135-
'style',
136-
'css',
137-
'less'
131+
{ loader: 'style-loader' },
132+
{ loader: 'css-loader' },
133+
{ loader: 'stylus-loader' }
138134
]
139135
},
140136
{
141-
test: /\.cssmodule\.styl$/,
137+
test: /\.json$/,
138+
loader: 'json-loader'
139+
},
140+
{
141+
test: /\.(js|jsx)$/,
142+
include: [].concat(
143+
this.includedPackages,
144+
[this.srcPathAbsolute]
145+
),
142146
loaders: [
143-
'style',
144-
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
145-
'stylus'
147+
// Note: Moved this to .babelrc
148+
{ loader: 'babel-loader' }
146149
]
147150
},
148151
{
149-
test: /^.((?!cssmodule).)*\.styl$/,
152+
test: /\.cssmodule\.(sass|scss)$/,
150153
loaders: [
151-
'style',
152-
'css',
153-
'stylus'
154+
{ loader: 'style-loader'},
155+
{
156+
loader: 'css-loader',
157+
query: cssModulesQuery
158+
},
159+
{ loader: 'sass-loader' }
154160
]
155161
},
156162
{
157-
test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
158-
loaders: ['file']
163+
test: /\.cssmodule\.css$/,
164+
loaders: [
165+
{ loader: 'style-loader'},
166+
{
167+
loader: 'css-loader',
168+
query: cssModulesQuery
169+
}
170+
]
159171
},
160172
{
161-
test: /\.json$/,
162-
loaders: 'json'
173+
test: /\.cssmodule\.less$/,
174+
loaders: [
175+
{ loader: 'style-loader'},
176+
{
177+
loader: 'css-loader',
178+
query: cssModulesQuery
179+
},
180+
{ loader: 'less-loader' }
181+
]
163182
},
164183
{
165-
test: /\.(js|jsx)$/,
166-
include: [].concat(
167-
this.includedPackages,
168-
[this.srcPathAbsolute]
169-
),
170-
loaders: ['react-hot', 'babel']
184+
test: /\.cssmodule\.styl$/,
185+
loaders: [
186+
{ loader: 'style-loader'},
187+
{
188+
loader: 'css-loader',
189+
query: cssModulesQuery
190+
},
191+
{ loader: 'stylus-loader' }
192+
]
171193
}
172194
]
173195
},
@@ -187,7 +209,7 @@ class WebpackBaseConfig {
187209
stores: `${this.srcPathAbsolute}/stores/`,
188210
styles: `${this.srcPathAbsolute}/styles/`
189211
},
190-
extensions: ['', '.js', '.jsx'],
212+
extensions: ['.js', '.jsx'],
191213
modules: [
192214
this.srcPathAbsolute,
193215
'node_modules'

‎conf/webpack/Dev.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class WebpackDevConfig extends WebpackBaseConfig {
1515
entry: [
1616
'webpack-dev-server/client?http://0.0.0.0:8000/',
1717
'webpack/hot/only-dev-server',
18+
'react-hot-loader/patch',
1819
'./client.js'
1920
],
2021
plugins: [

‎conf/webpack/Dist.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ class WebpackDistConfig extends WebpackBaseConfig {
1414
this.config = {
1515
cache: false,
1616
devtool: 'source-map',
17+
entry: [
18+
'./client.js'
19+
],
1720
plugins: [
1821
new webpack.DefinePlugin({
1922
'process.env.NODE_ENV': '"production"'
2023
}),
21-
new webpack.optimize.DedupePlugin(),
2224
new webpack.optimize.AggressiveMergingPlugin(),
2325
new webpack.NoErrorsPlugin()
2426
]

‎conf/webpack/Test.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,29 @@ class WebpackTestConfig extends WebpackBaseConfig {
1212
super();
1313
this.config = {
1414
devtool: 'inline-source-map',
15+
entry: [
16+
'./client.js'
17+
],
1518
externals: {
16-
cheerio: 'window',
17-
'react/lib/ExecutionEnvironment': true,
18-
'react/addons': true,
19-
'react/lib/ReactContext': true,
19+
'cheerio': 'window',
20+
'react/addons': 'true',
21+
'react/lib/ExecutionEnvironment': 'true',
22+
'react/lib/ReactContext': 'true'
2023
},
2124
module: {
2225
loaders: [
2326
{
2427
test: /\.cssmodule\.css$/,
2528
loaders: [
26-
'style',
27-
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
29+
{ loader: 'style-loader'},
30+
{
31+
loader: 'css-loader',
32+
query: {
33+
modules: true,
34+
importLoaders: 1,
35+
localIdentName: '[name]-[local]-[hash:base64:5]'
36+
}
37+
}
2838
]
2939
},
3040
{
@@ -37,7 +47,7 @@ class WebpackTestConfig extends WebpackBaseConfig {
3747
},
3848
{
3949
test: /\.json$/,
40-
loader: 'json'
50+
loader: 'json-loader'
4151
},
4252
{
4353
test: /\.(js|jsx)$/,

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@
3939
"homepage": "https://github.com/react-webpack-generators/react-webpack-template#readme",
4040
"devDependencies": {
4141
"babel-core": "^6.7.6",
42-
"babel-eslint": "^6.0.4",
42+
"babel-eslint": "^7.1.0",
4343
"babel-loader": "^6.2.4",
44-
"babel-plugin-istanbul": "^2.0.0",
44+
"babel-plugin-istanbul": "^3.0.0",
4545
"babel-plugin-transform-decorators-legacy": "^1.3.4",
4646
"babel-plugin-transform-object-rest-spread": "^6.8.0",
4747
"babel-polyfill": "^6.9.0",
@@ -50,13 +50,13 @@
5050
"babel-preset-react": "^6.5.0",
5151
"chai": "^3.5.0",
5252
"copyfiles": "^1.0.0",
53-
"css-loader": "^0.24.0",
53+
"css-loader": "^0.26.0",
5454
"enzyme": "^2.2.0",
5555
"eslint": "^3.0.0",
56-
"eslint-config-airbnb": "^10.0.0",
56+
"eslint-config-airbnb": "^13.0.0",
5757
"eslint-loader": "^1.3.0",
58-
"eslint-plugin-import": "^1.4.0",
59-
"eslint-plugin-jsx-a11y": "^2.0.0",
58+
"eslint-plugin-import": "^2.2.0",
59+
"eslint-plugin-jsx-a11y": "^2.2.0",
6060
"eslint-plugin-react": "^6.0.0",
6161
"file-loader": "^0.9.0",
6262
"karma": "^1.0.0",
@@ -73,18 +73,18 @@
7373
"null-loader": "^0.1.1",
7474
"phantomjs-prebuilt": "^2.1.7",
7575
"react-addons-test-utils": "^15.0.1",
76-
"react-hot-loader": "^1.3.0",
7776
"rimraf": "^2.5.2",
7877
"sinon": "^1.17.3",
7978
"style-loader": "^0.13.1",
8079
"url-loader": "^0.5.7",
8180
"webpack": "^2.1.0-beta.6",
82-
"webpack-dev-server": "^2.0.0-beta"
81+
"webpack-dev-server": "^2.1.0-beta"
8382
},
8483
"dependencies": {
85-
"cross-env": "^2.0.0",
84+
"cross-env": "^3.1.0",
8685
"react": "^15.0.1",
87-
"react-dom": "^15.0.1"
86+
"react-dom": "^15.0.1",
87+
"react-hot-loader": "^3.0.0-beta.6"
8888
},
8989
"engines": {
9090
"node": ">= 4.0.0",

‎src/client.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import { AppContainer } from 'react-hot-loader';
34
import App from './components/App';
45

5-
ReactDOM.render(<App />, document.getElementById('app'));
6+
ReactDOM.render(
7+
<AppContainer>
8+
<App />
9+
</AppContainer>,
10+
document.getElementById('app')
11+
);
12+
13+
if (module.hot) {
14+
module.hot.accept('./components/App', () => {
15+
const NextApp = require('./components/App').default; // eslint-disable-line global-require
16+
ReactDOM.render(
17+
<AppContainer>
18+
<NextApp />
19+
</AppContainer>,
20+
document.getElementById('app')
21+
);
22+
});
23+
}

0 commit comments

Comments
 (0)