inital commit 😺

andrewagain · Nov 19, 2015 · f3ca9f6 · f3ca9f6
commit f3ca9f6
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+www/bundle.js
+*/www/bundle.js
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+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
+
+
+Running
+---
+
+    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.
diff --git a/js/box-creator.js b/js/box-creator.js
@@ -0,0 +1,20 @@
+/**
+ * Example of how to use webpack HMR in a module that creates side effects.
+ *
+ * When this code runs, a <div> is created.
+ *
+ * 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');
+sideEffectNode.setAttribute('style', 'background-color: lightblue; padding: 20px; margin: 10px;');
+sideEffectNode.textContent = 'Side Effect';
+document.body.appendChild(sideEffectNode);
+
+// Remove the most recently-added <div> so that when the code runs again and
+// adds a new <div>, we don't end up with duplicate divs.
+if (module.hot) {
+  module.hot.dispose(function() {
+    sideEffectNode.parentNode.removeChild(sideEffectNode);
+  });
+}
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,14 @@
+var 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);
+
+// Console.log statements are reprinted on every reload.
+console.log('Math result:' + result);
+
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/js/math-doer.js b/js/math-doer.js
@@ -0,0 +1,11 @@
+/**
+ * A module that exports a single function that does math.
+ * This is an example of a module with no side effects.
+ *
+ * Since the parent uses `module.hot.accept()`, this file does not need any
+ * special HMR code.
+ */
+function doSomeMaths(x, y) {
+  return x * y + 2;
+}
+module.exports = doSomeMaths;
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "hmr-webpack-hot-middleware",
+  "version": "0.0.1",
+  "description": "Example project showing use of webpack hot middleware.",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "keywords": [
+    "webpack",
+    "webpack-dev-server",
+    "webpack-hot-middleware",
+    "express",
+    "HMR",
+    "hot module replacement"
+  ],
+  "author": "Andrew H Farmer",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "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"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,36 @@
+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();
+
+var compiler = webpack(webpackConfig);
+
+app.use(webpackDevMiddleware(compiler, {
+  hot: true,
+  filename: 'bundle.js',
+  publicPath: '/assets/',
+  stats: {
+    colors: true,
+  },
+  historyApiFallback: true,
+}));
+
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log,
+  path: '/__webpack_hmr',
+  heartbeat: 10 * 1000,
+}));
+
+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;
+
+  console.log('Example app listening at http://%s:%s', host, port);
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,21 @@
+var path = require('path');
+var webpack = require('webpack');
+
+var config = {
+  context: path.join(__dirname, 'js'),
+  entry: [
+    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
+    './index.js',
+  ],
+  output: {
+    path: path.join(__dirname, 'www'),
+    filename: 'bundle.js',
+    publicPath: '/assets/',
+  },
+  plugins: [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ]
+};
+module.exports = config;
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,9 @@
+<body>
+  <span id='hello'>
+    Hello
+  </span>
+  <span id='world'>
+    World
+  </span>
+  <script src='bundle.js'></script>
+</body>