update to webpack 2

andrewagain · Feb 8, 2017 · a085f31 · a085f31
1 parent 48f0d9c
commit a085f31
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 51 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 www/bundle.js
 */www/bundle.js
+*.log
diff --git a/middleware/README.md b/middleware/README.md
@@ -3,21 +3,29 @@ HMR w/ webpack-hot-middleware and express
 This project is a simple example of how to use [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) to enable HMR on your express server.
 
 
+
 Setup
 ---
 
-    npm install
+```
+npm install
+```
+
 
 
 Running
 ---
 
-    npm start
+```
+npm start
+```
 
 Open [http://localhost:3000](http://localhost:3000).
 
+
+
 Discussion
 ---
 The `npm start` command runs: `node server.js`. This starts the express server which is configured to use `webpack-hot-middleware`.
 
-This is ideal when you are already using or planning to use express to host your web page.
+This is ideal when you are already using or planning to use express.
diff --git a/middleware/js/box-creator.js b/middleware/js/box-creator.js
@@ -6,7 +6,7 @@
  * To prevent a new <div> from being created every time this module is reloaded,
  * `module.hot.dispose` is used to remove the old <div>.
  */
-var sideEffectNode = document.createElement('div');
+const sideEffectNode = document.createElement('div');
 sideEffectNode.setAttribute('style', 'background-color: lightblue; padding: 20px; margin: 10px;');
 sideEffectNode.textContent = 'Side Effect';
 document.body.appendChild(sideEffectNode);

diff --git a/middleware/js/index.js b/middleware/js/index.js
@@ -1,10 +1,10 @@
-var mathDoer = require('./math-doer');
+const mathDoer = require('./math-doer');
 
 // This require() statement has side effects.
 require('./box-creator');
 
 // mathDoer just does some math on 2 inputs.
-var result = mathDoer(7, 3);
+const result = mathDoer(7, 3);
 
 // Console.log statements are reprinted on every reload.
 console.log('Math result:' + result);

diff --git a/middleware/package.json b/middleware/package.json
@@ -21,9 +21,9 @@
     "url": "git://github.com/ahfarmer/webpack-hmr-3-ways.git"
   },
   "dependencies": {
-    "express": "^4.13.3",
-    "webpack": "^1.12.2",
-    "webpack-dev-middleware": "^1.2.0",
-    "webpack-hot-middleware": "^2.4.1"
+    "express": "^4.14.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.16.1"
   }
 }
diff --git a/middleware/server.js b/middleware/server.js
@@ -1,12 +1,11 @@
-var express = require('express');
-var webpackDevMiddleware = require("webpack-dev-middleware");
-var webpackHotMiddleware = require("webpack-hot-middleware");
-var webpack = require('webpack');
-var webpackConfig = require('./webpack.config.js');
-var path = require('path');
-var app = express();
+const express = require('express');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const webpack = require('webpack');
+const webpackConfig = require('./webpack.config.js');
+const app = express();
 
-var compiler = webpack(webpackConfig);
+const compiler = webpack(webpackConfig);
 
 app.use(webpackDevMiddleware(compiler, {
   hot: true,
@@ -24,13 +23,13 @@ app.use(webpackHotMiddleware(compiler, {
   heartbeat: 10 * 1000,
 }));
 
-app.get('/', function (req, res) {
+app.get('/', function(req, res) {
   res.send('<body>Hello World<script src=\'assets/bundle.js\'></script></body>');
 });
 
-var server = app.listen(3000, function () {
-  var host = server.address().address;
-  var port = server.address().port;
+const server = app.listen(3000, function() {
+  const host = server.address().address;
+  const port = server.address().port;
 
   console.log('Example app listening at http://%s:%s', host, port);
 });
diff --git a/middleware/webpack.config.js b/middleware/webpack.config.js
@@ -1,7 +1,7 @@
-var path = require('path');
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
 
-var config = {
+module.exports = {
   context: path.join(__dirname, 'js'),
   entry: [
     'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
@@ -13,9 +13,7 @@ var config = {
     publicPath: '/assets/',
   },
   plugins: [
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin()
-  ]
+    new webpack.NoEmitOnErrorsPlugin(),
+  ],
 };
-module.exports = config;
diff --git a/server-api/js/box-creator.js b/server-api/js/box-creator.js
@@ -6,7 +6,7 @@
  * To prevent a new <div> from being created every time this module is reloaded,
  * `module.hot.dispose` is used to remove the old <div>.
  */
-var sideEffectNode = document.createElement('div');
+const sideEffectNode = document.createElement('div');
 sideEffectNode.setAttribute('style', 'background-color: lightblue; padding: 20px; margin: 10px;');
 sideEffectNode.textContent = 'Side Effect';
 document.body.appendChild(sideEffectNode);

diff --git a/server-api/js/index.js b/server-api/js/index.js
@@ -1,10 +1,10 @@
-var mathDoer = require('./math-doer');
+const mathDoer = require('./math-doer');
 
 // This require() statement has side effects.
 require('./box-creator');
 
 // mathDoer just does some math on 2 inputs.
-var result = mathDoer(7, 3);
+const result = mathDoer(7, 3);
 
 // Console.log statements are reprinted on every reload.
 console.log('Math result:' + result);

diff --git a/server-api/package.json b/server-api/package.json
@@ -20,7 +20,7 @@
     "url": "git://github.com/ahfarmer/webpack-hmr-3-ways.git"
   },
   "dependencies": {
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
   }
 }
diff --git a/server-api/server.js b/server-api/server.js
@@ -5,13 +5,13 @@
  * see the webpack-dev-server API docs:
  * https://github.com/webpack/docs/wiki/webpack-dev-server#api
  */
-var WebpackDevServer = require('webpack-dev-server');
-var webpack = require('webpack');
-var config = require('./webpack.config.js');
-var path = require('path');
+const WebpackDevServer = require('webpack-dev-server');
+const webpack = require('webpack');
+const config = require('./webpack.config.js');
+const path = require('path');
 
-var compiler = webpack(config);
-var server = new WebpackDevServer(compiler, {
+const compiler = webpack(config);
+const server = new WebpackDevServer(compiler, {
   contentBase: 'www',
   hot: true,
   filename: 'bundle.js',

diff --git a/server-api/webpack.config.js b/server-api/webpack.config.js
@@ -1,7 +1,7 @@
-var path = require('path');
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
 
-var config = {
+module.exports = {
   context: path.join(__dirname, 'js'),
   entry: [
     './index.js',
@@ -15,6 +15,5 @@ var config = {
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
-  ]
+  ],
 };
-module.exports = config;
diff --git a/server-cli/README.md b/server-cli/README.md
@@ -3,20 +3,28 @@ HMR w/ webpack-dev-server CLI
 This project shows the absolute simplest way to use Webpack HMR, which is with webpack-dev-server CLI
 
 
+
+
 Setup
 ---
 
-    npm install
+```
+npm install
+```
+
 
 
 Running
 ---
 
-    npm start
+```
+npm start
+```
 
 Open [http://localhost:8080](http://localhost:8080).
 
 
+
 Discussion
 ---
 The `npm start` command runs: `webpack-dev-server --content-base=www --inline --watch --hot`.

diff --git a/server-cli/package.json b/server-cli/package.json
@@ -20,7 +20,7 @@
     "url": "git://github.com/ahfarmer/webpack-hmr-3-ways.git"
   },
   "dependencies": {
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.1"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
   }
 }
diff --git a/server-cli/webpack.config.js b/server-cli/webpack.config.js
@@ -1,6 +1,6 @@
-var path = require('path');
+const path = require('path');
 
-var config = {
+const config = {
   context: path.join(__dirname, 'js'),
   entry: [
     './index.js',