webpack-dev-server 热加载 与 react-hot-loader 两者的区别?
- webpack-dev-server 的热加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面。
- react-hot-loader不会刷新整个页面,它只替换了修改的代码,做到了页面的局部刷新。但它需要依赖 webpack 的 HotModuleReplacement
热加载插件。
如何配置 react-hot-loader :
步骤1:
安装 react-hot-loader
npm install --save-dev react-hot-loader
步骤2:
在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch,一定要写在entry 的最前面,如果有 babel-polyfill 就写在babel-polyfill 的后面。
entry: [
'babel-polyfill',
'react-hot-loader/patch', //设置这里
__dirname + '/app/main.js'
]
步骤3:
在 webpack.config.js 中设置 devServer 的 hot 为 true
devServer: {
contentBase: './build',
port: '1188',
historyApiFallback: true,
inline: true,
hot: true, //设