It’s very easy to integrate react-hot-loader into webpack with ts-loader.

Config the webpack

Add Hot Module Replacement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.entry
app: [
  'webpack/hot/only-dev-server',
  'webpack-dev-server/client?http://localhost:8080',
  path.resolve(__dirname, './src'),
],

plugins: [
  new webpack.HotModuleReplacementPlugin()
],

devServer: {
  hot: true,
}

Add React-Hot-Loader into webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// add react-hot-loader to entry point

entry: [
  'webpack/hot/only-dev-server',
  'webpack-dev-server/client?http://localhost:8080',
  'react-hot-loader/patch',
  path.resolve(__dirname, './src/'),
],
// add loader
module: {
  rules: [
    {
      test: /\.tsx$/,
      use: ['react-hot-loader/webpack/', 'ts-loader'],
      exclude: /node_modules/,
      include: path.resolve(__dirname, './src'),
    }
  ]
}

Wrap Root Container into module.hot.accept

1
2
3
4
5
6
if (module.hot) {
  module.hot.accept('./router', () => {
    const Root = require('./router').default
    render(<Root />, htmlDOM)
  })
}

Note, if you are using ts with babel-preset-es2015, you can set babel to ignore es2015 module transform by

1
2
3
{
  "presets": [["es2015", {"modules": false}]]
}

because webpack 3 has built-in support for ES2015 modules. You won’t need to re-require you root module.

1
2
3
4
5
if (module.hot) {
  module.hot.accept('./router', () => {
    render(<Root />, htmlDOM)
  })
}

Same treatment in ts if your target is es6