V2 -- Updated Dependencies, Webpack, Hot reloader (#72)

stylesuxx · sthzg · commit ba0f20c08c00 · 2016-11-22T10:39:31.000+01:00
* 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
diff --git a/.babelrc b/.babelrc
@@ -6,7 +6,8 @@
   ],
   "plugins": [
     "transform-decorators-legacy",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    "react-hot-loader/babel"
   ],
   "env": {
     "test": {
diff --git a/conf/webpack/Base.js b/conf/webpack/Base.js
@@ -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/',
@@ -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' }
+            ]
           }
         ]
       },
@@ -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'
diff --git a/conf/webpack/Dev.js b/conf/webpack/Dev.js
@@ -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: [
diff --git a/conf/webpack/Dist.js b/conf/webpack/Dist.js
@@ -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()
       ]
diff --git a/conf/webpack/Test.js b/conf/webpack/Test.js
@@ -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]'
+                }
+              }
             ]
           },
           {
@@ -37,7 +47,7 @@ class WebpackTestConfig extends WebpackBaseConfig {
           },
           {
             test: /\.json$/,
-            loader: 'json'
+            loader: 'json-loader'
           },
           {
             test: /\.(js|jsx)$/,
diff --git a/package.json b/package.json
@@ -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",
@@ -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",
@@ -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",
diff --git a/src/client.js b/src/client.js
@@ -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')
+    );
+  });
+}
