Skip to content

Instantly share code, notes, and snippets.

@jiyinyiyong jiyinyiyong/

Last active Nov 10, 2015
What would you like to do?
My sharing on HMR, generate slide with

Hot Module Replacing with Webpack


Chen Yong, @jiyinyiyong

What is Webpack?

Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.


  • Bundles both CommonJs and AMD modules.
  • Bundle splitting
  • Async loading
  • Packaging static assets like images and CSS
  • Loaders can preprocess files while compiling
  • Highly modular plugin system.


Hot Module Replacement(HMR)

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload.

  • react-hot-loader
  • babel-plugin-react-transform

How to HMR my code?

// check if HMR is enabled
if ( {
    // accept itself;
    // removeStyleTag(element: HTMLStyleElement) => void
    var removeStyleTag = require("./removeStyleTag");
    // dispose handler {
        // revoke the side effect

Another example

// check if HMR is enabled
if ( {
    // accept update of dependency"./handler.js", function() {
        // replace request handler of server
        server.removeListener("request", requestHandler);
        requestHandler = require("./handler.js");
        server.on("request", requestHandler);


  • replace JSON configs
  • replace pure function
  • replace simple code with state(

So, is it really working on server side?


  • Compile the server code with webpack
  • Use target: "node" or target: "async-node"
  • Enabled HMR via --hot or HotModuleReplacementPlugin
  • Use webpack/hot/poll or webpack/hot/signal
  • Run the bundle with node.

Demo HMR server code

webpack = require 'webpack'
module.exports =
  entry: [ 'webpack/hot/poll?1000', './src']
  target: 'node'
    path: 'build/'
    filename: 'bundle.js'
    loaders: [
      {test: /\.coffee/, loader: 'coffee'}
  plugins: [
    new webpack.HotModuleReplacementPlugin()
    extensions: ['.js', '', '.coffee']


  • frontend
  • replace code behind a WebSocket server!

Maybe a demo in the future


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.