Skip to content

Commit

Permalink
V2 -- Updated Dependencies, Webpack, Hot reloader (#72)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
stylesuxx authored and sthzg committed Nov 22, 2016
1 parent 24528b6 commit ba0f20c
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 72 deletions.
3 changes: 2 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
],
"plugins": [
"transform-decorators-legacy",
"transform-object-rest-spread"
"transform-object-rest-spread",
"react-hot-loader/babel"
],
"env": {
"test": {
Expand Down
126 changes: 74 additions & 52 deletions conf/webpack/Base.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,14 @@ class WebpackBaseConfig {
* @return {Object}
*/
get defaultSettings() {
const cssModulesQuery = {
modules: true,
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:5]'
};

return {
context: this.srcPathAbsolute,
debug: false,
devtool: 'eval',
devServer: {
contentBase: './src/',
Expand All @@ -81,93 +86,110 @@ class WebpackBaseConfig {
inline: true,
port: 8000
},
entry: './client.js',
entry: './index.js',
module: {
preLoaders: [
rules: [
{
test: /\.(js|jsx)$/,
enforce: 'pre',
test: /\.js?$/,
include: this.srcPathAbsolute,
loader: 'eslint'
}
],
loaders: [
{
test: /\.cssmodule\.css$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
]
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /^.((?!cssmodule).)*\.css$/,
loaders: [
'style',
'css'
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.cssmodule\.(sass|scss)$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'sass'
]
test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
loader: 'file-loader'
},
{
test: /^.((?!cssmodule).)*\.(sass|scss)$/,
loaders: [
'style',
'css',
'sass'
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
]
},
{
test: /\.cssmodule\.less$/,
test: /^.((?!cssmodule).)*\.less$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'less'
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
},
{
test: /^.((?!cssmodule).)*\.less$/,
test: /^.((?!cssmodule).)*\.styl$/,
loaders: [
'style',
'css',
'less'
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'stylus-loader' }
]
},
{
test: /\.cssmodule\.styl$/,
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(js|jsx)$/,
include: [].concat(
this.includedPackages,
[this.srcPathAbsolute]
),
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]',
'stylus'
// Note: Moved this to .babelrc
{ loader: 'babel-loader' }
]
},
{
test: /^.((?!cssmodule).)*\.styl$/,
test: /\.cssmodule\.(sass|scss)$/,
loaders: [
'style',
'css',
'stylus'
{ loader: 'style-loader'},
{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'sass-loader' }
]
},
{
test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2)$/,
loaders: ['file']
test: /\.cssmodule\.css$/,
loaders: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
query: cssModulesQuery
}
]
},
{
test: /\.json$/,
loaders: 'json'
test: /\.cssmodule\.less$/,
loaders: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'less-loader' }
]
},
{
test: /\.(js|jsx)$/,
include: [].concat(
this.includedPackages,
[this.srcPathAbsolute]
),
loaders: ['react-hot', 'babel']
test: /\.cssmodule\.styl$/,
loaders: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
query: cssModulesQuery
},
{ loader: 'stylus-loader' }
]
}
]
},
Expand All @@ -187,7 +209,7 @@ class WebpackBaseConfig {
stores: `${this.srcPathAbsolute}/stores/`,
styles: `${this.srcPathAbsolute}/styles/`
},
extensions: ['', '.js', '.jsx'],
extensions: ['.js', '.jsx'],
modules: [
this.srcPathAbsolute,
'node_modules'
Expand Down
1 change: 1 addition & 0 deletions conf/webpack/Dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ class WebpackDevConfig extends WebpackBaseConfig {
entry: [
'webpack-dev-server/client?http://0.0.0.0:8000/',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./client.js'
],
plugins: [
Expand Down
4 changes: 3 additions & 1 deletion conf/webpack/Dist.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ class WebpackDistConfig extends WebpackBaseConfig {
this.config = {
cache: false,
devtool: 'source-map',
entry: [
'./client.js'
],
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin()
]
Expand Down
24 changes: 17 additions & 7 deletions conf/webpack/Test.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,29 @@ class WebpackTestConfig extends WebpackBaseConfig {
super();
this.config = {
devtool: 'inline-source-map',
entry: [
'./client.js'
],
externals: {
cheerio: 'window',
'react/lib/ExecutionEnvironment': true,
'react/addons': true,
'react/lib/ReactContext': true,
'cheerio': 'window',
'react/addons': 'true',
'react/lib/ExecutionEnvironment': 'true',
'react/lib/ReactContext': 'true'
},
module: {
loaders: [
{
test: /\.cssmodule\.css$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]'
{ loader: 'style-loader'},
{
loader: 'css-loader',
query: {
modules: true,
importLoaders: 1,
localIdentName: '[name]-[local]-[hash:base64:5]'
}
}
]
},
{
Expand All @@ -37,7 +47,7 @@ class WebpackTestConfig extends WebpackBaseConfig {
},
{
test: /\.json$/,
loader: 'json'
loader: 'json-loader'
},
{
test: /\.(js|jsx)$/,
Expand Down
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
"homepage": "https://github.com/react-webpack-generators/react-webpack-template#readme",
"devDependencies": {
"babel-core": "^6.7.6",
"babel-eslint": "^6.0.4",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-istanbul": "^2.0.0",
"babel-plugin-istanbul": "^3.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-polyfill": "^6.9.0",
Expand All @@ -50,13 +50,13 @@
"babel-preset-react": "^6.5.0",
"chai": "^3.5.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.24.0",
"css-loader": "^0.26.0",
"enzyme": "^2.2.0",
"eslint": "^3.0.0",
"eslint-config-airbnb": "^10.0.0",
"eslint-config-airbnb": "^13.0.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-import": "^1.4.0",
"eslint-plugin-jsx-a11y": "^2.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.0",
"eslint-plugin-react": "^6.0.0",
"file-loader": "^0.9.0",
"karma": "^1.0.0",
Expand All @@ -73,18 +73,18 @@
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"react-addons-test-utils": "^15.0.1",
"react-hot-loader": "^1.3.0",
"rimraf": "^2.5.2",
"sinon": "^1.17.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.6",
"webpack-dev-server": "^2.0.0-beta"
"webpack-dev-server": "^2.1.0-beta"
},
"dependencies": {
"cross-env": "^2.0.0",
"cross-env": "^3.1.0",
"react": "^15.0.1",
"react-dom": "^15.0.1"
"react-dom": "^15.0.1",
"react-hot-loader": "^3.0.0-beta.6"
},
"engines": {
"node": ">= 4.0.0",
Expand Down
20 changes: 19 additions & 1 deletion src/client.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(
<AppContainer>
<App />
</AppContainer>,
document.getElementById('app')
);

if (module.hot) {
module.hot.accept('./components/App', () => {
const NextApp = require('./components/App').default; // eslint-disable-line global-require
ReactDOM.render(
<AppContainer>
<NextApp />
</AppContainer>,
document.getElementById('app')
);
});
}

0 comments on commit ba0f20c

Please sign in to comment.