HMR, better sourcemaps, HtmlWebpackPlugin

grgur · grgur · commit 73b55530c9c1 · 2017-01-23T09:36:32.000+01:00
diff --git a/README.md b/README.md
@@ -6,14 +6,23 @@ Webpack 2 automatically splits routes in chunks (small bundles) and loads them o
 
 ## Contains
 
-- [x] [Webpack 2](https://webpack.github.io)
+- [x] [Webpack 2.2](https://webpack.github.io)
 - [x] [React 0.15](https://facebook.github.io/react/)
-- [x] [Babel 6.5](https://babeljs.io/)
+- [x] [Babel 6.x](https://babeljs.io/)
+
+## Features
+
+- [x] Tree shaking
+- [x] Code Splitting
+- [x] Hot Module Replacement
+- [x] ES6 Source debugging in Chrome with sourcemaps
+- [x] React Router
+- [x] Yarn-friendly
 
 ##System Requirements
 Before installing the dependencies, make sure your system has the correct Node and Npm versions, otherwise you will get errors.
 
-- Node 5.x.x
+- Node 6.x.x
 - Npm 3.x.x
 
 ## Setup
diff --git a/client/index.ejs b/client/index.ejs
@@ -4,11 +4,8 @@
     <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
     <meta charset="utf-8">
     <title>React Router + Webpack 2 + Dynamic Chunk Navigation</title>
-    <link href="/style.css" media="all" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
-    <script src="/vendor.bundle.js"></script>
-    <script src="/bundle.js"></script>
   </body>
 </html>
diff --git a/client/index.js b/client/index.js
@@ -1,11 +1,20 @@
 import { render } from 'react-dom';
 import React from 'react';
-import { Router, browserHistory } from 'react-router/es6';
-import rootRoute from 'pages/routes';
-import 'index.html';
+import Root from 'pages/routes';
 import 'general.scss';
 
 render(
-  <Router history={browserHistory} routes={rootRoute} />,
+  <Root />,
   document.getElementById('root')
 );
+
+if (module.hot) {
+  module.hot.accept('pages/routes', () => {
+    const NewRoot = require('pages/routes').default;
+
+    render(
+      <NewRoot />,
+      document.getElementById('root')
+    );
+  });
+}
diff --git a/client/pages/routes.js b/client/pages/routes.js
@@ -1,3 +1,5 @@
+import React from 'react';
+import { Router, browserHistory } from 'react-router/es6';
 import App from 'containers/App';
 
 function errorLoading(err) {
@@ -8,7 +10,7 @@ function loadRoute(cb) {
   return (module) => cb(null, module.default);
 }
 
-export default {
+const routes = {
   component: App,
   childRoutes: [
     {
@@ -37,3 +39,5 @@ export default {
     },
   ]
 };
+
+export default () => <Router history={browserHistory} routes={routes} />;
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "css-loader": "0.14.5",
     "extract-text-webpack-plugin": "2.0.0-beta.5",
     "file-loader": "0.8.5",
+    "html-webpack-plugin": "2.26.0",
     "node-sass": "3.12.2",
     "sass-loader": "3.2.3",
     "style-loader": "0.13.1",
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const nodeEnv = process.env.NODE_ENV || 'development';
 const isProd = nodeEnv === 'production';
@@ -19,6 +20,16 @@ const plugins = [
   new webpack.DefinePlugin({
     'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
   }),
+  new HtmlWebpackPlugin({
+    template: sourcePath + '/index.ejs',
+    production: isProd,
+    inject: true,
+  }),
+];
+
+const jsEntry = [
+  'index',
+  'pages/Home',
 ];
 
 if (isProd) {
@@ -46,16 +57,23 @@ if (isProd) {
     }),
     extractCSS
   );
+
+  jsEntry.unshift(
+    'webpack-dev-server/client?http://localhost:3000',
+    'webpack/hot/only-dev-server'
+  );
+} else {
+  plugins.push(
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
+  );
 }
 
 module.exports = {
-  devtool: isProd ? 'source-map' : 'eval',
+  devtool: isProd ? 'source-map' : 'cheap-module-source-map',
   context: sourcePath,
   entry: {
-    js: [
-      'index',
-      'pages/Home'
-    ],
+    js: jsEntry,
     vendor: [
       'react',
       'react-dom'
@@ -116,6 +134,7 @@ module.exports = {
     contentBase: './client',
     historyApiFallback: true,
     port: 3000,
+    hot: true,
     compress: isProd,
     stats: { colors: true },
   }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import React from 'react';`
	`2`	`+import { Router, browserHistory } from 'react-router/es6';`
`1`	`3`	`import App from 'containers/App';`
`2`	`4`
`3`	`5`	`function errorLoading(err) {`
`@@ -8,7 +10,7 @@ function loadRoute(cb) {`
`8`	`10`	`return (module) => cb(null, module.default);`
`9`	`11`	`}`
`10`	`12`
`11`		`-export default {`
	`13`	`+const routes = {`
`12`	`14`	`component: App,`
`13`	`15`	`childRoutes: [`
`14`	`16`	`{`
`@@ -37,3 +39,5 @@ export default {`
`37`	`39`	`},`
`38`	`40`	`]`
`39`	`41`	`};`
	`42`	`+`
	`43`	`+export default () => <Router history={browserHistory} routes={routes} />;`