StephenGrider · vilsbole · Feb 21, 2018 · Feb 21, 2018 · Feb 21, 2018 · Feb 23, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,7 @@
 {
-  "presets": ["react", "es2015", "stage-1"]
+  "presets": [
+    "react",
+    ["es2015", {"modules": false }], 
+    "stage-1"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,9 @@ bundle.js
 npm-debug.log
 .DS_Store
 
+# Webpack build
+/dist
+
 # IntelliJ
 *.iml
 /.idea
diff --git a/package.json b/package.json
@@ -5,31 +5,38 @@
   "main": "index.js",
   "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
   "scripts": {
-    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "clean": "rimraf ./dist",
+    "start": "npm run clean && webpack-dev-server",
+    "build": "webpack --config webpack.config.js",
     "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
     "test:watch": "npm run test -- --watch"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.2.1",
-    "babel-loader": "^6.2.0",
+    "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
     "chai": "^3.5.0",
     "chai-jquery": "^2.0.0",
+    "css-loader": "^0.28.9",
+    "html-webpack-plugin": "^2.30.1",
     "jquery": "^2.2.1",
     "jsdom": "^8.1.0",
     "mocha": "^2.4.5",
     "react-addons-test-utils": "^0.14.7",
-    "webpack": "^1.12.9",
-    "webpack-dev-server": "^1.14.0"
+    "rimraf": "^2.6.2",
+    "style-loader": "^0.20.2",
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1"
   },
   "dependencies": {
     "babel-preset-stage-1": "^6.1.18",
     "lodash": "^3.10.1",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
+    "react-hot-loader": "^3.1.3",
     "react-redux": "4.3.0",
     "react-router": "^2.0.1",
     "redux": "^3.0.4"

diff --git a/src/components/app.js b/src/components/app.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 export default class App extends Component {
   render() {
     return (
-      <div>React simple starter</div>
+      <div>React simple change</div>
     );
   }
 }
diff --git a/index.html → src/index.html b/index.html → src/index.html
@@ -2,12 +2,10 @@
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/style/style.css">
-    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css"  href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
     <script src="https://maps.googleapis.com/maps/api/js"></script>
   </head>
   <body>
     <div class="container"></div>
   </body>
-  <script src="/bundle.js"></script>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -2,14 +2,43 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
+import { AppContainer } from 'react-hot-loader';
 
 import App from './components/app';
 import reducers from './reducers';
 
+import style from '../style/style.css'
+
 const createStoreWithMiddleware = applyMiddleware()(createStore);
+const store = createStoreWithMiddleware(reducers);
+
+const render = Component => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <AppContainer>
+        <Component />
+      </AppContainer>
+    </Provider>
+    , document.querySelector('.container')
+  );
+}
+
+/* Intital rendering of the component */
+render(App);
+
 
-ReactDOM.render(
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+/* Could use an extra ENV check for development */
+if (module.hot) {
+  /*
+    Full page reload on reducer change
+    changelog: https://github.com/reactjs/react-redux/releases/tag/v2.0.0
+    explanation: https://github.com/gaearon/react-hot-loader/issues/413
+  */
+  module.hot.accept('./reducers', () => {
+    store.replaceReducer(reducers)
+  });
+  /* HMR reload on component change. */
+  module.hot.accept('./components/app', () => {
+    render(App);
+  });
+}
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux';
 
 const rootReducer = combineReducers({
-  state: (state = {}) => state
+  state: (state = {}) => state,
 });
 
 export default rootReducer;
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,26 +1,41 @@
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
 module.exports = {
-  entry: [
-    './src/index.js'
-  ],
+  entry: [ 'react-hot-loader/patch', './src/index.js' ],
   output: {
-    path: __dirname,
+    path: path.resolve(__dirname, 'dist'),
     publicPath: '/',
     filename: 'bundle.js'
   },
   module: {
-    loaders: [{
-      exclude: /node_modules/,
-      loader: 'babel',
-      query: {
-        presets: ['react', 'es2015', 'stage-1']
+    loaders: [
+      {
+        test: /\.(js|jsx)$/,
+        include: path.join(__dirname, 'src'),
+        loaders: ['react-hot-loader/webpack', 'babel-loader']
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader']
       }
-    }]
+    ]
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['*', '.js', '.jsx']
   },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'src/index.html'),
+      inject: 'body',
+    })
+  ],
+  devtool: 'inline-source-map',
   devServer: {
     historyApiFallback: true,
-    contentBase: './'
+    contentBase: './dist',
+    hot: true,
   }
 };