React-Hot-Loader in Webpack With Ts-Loader

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

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×