反应热加载设置-Self Note系列

设置好Webpack之后,即可管理所有资产。 现在是时候让我做好准备了。 此刻,每次我对代码进行任何更改时,都需要刷新Web浏览器才能看到更改的效果。 当我处于开发的一个非常紧张的阶段时,这尤其令人讨厌,因此一个称为“热加载”的功能便是答案。 今天,我将逐步介绍如何设置此功能。

步骤1

由于我将Express用于服务器管理,因此我将使用中间件来实现热加载功能。 接下来,我需要为现有的开发中间件设置几个选项

  #server / index.js ##新代码 
从'webpack-hot-middleware'导入webpackHotMiddleware;
const编译器= webpack(webpackConfig);
app.use(webpackHotMiddleware(compiler)); ##修改后的代码
app.use(webpackMiddleware(compiler,{
热门:是的,
publicPath:webpackConfig.output.publicPath,
noInfo:true
}));

由于我需要在多个地方应用webPackConfig,因此我将其分配给一个常量并使用它。

第2步

我还将需要如下修改webpack配置文件

  #webpack.config.dev.js 
##新导入
从'webpack'导入webpack;
##输入项:
条目:[
'react-hot-loader / patch',
'webpack-hot-middleware / client',
],
## in输出
输出:{
publicPath:'/'
},
## add插件
插件:[
新的webpack.NoEmitOnErrorsPlugin(),
新的webpack.optimize.OccurrenceOrderPlugin(),
新的webpack.HotModuleReplacementPlugin()
],

我还需要设置反应以在需要时重新加载自身,因此我还需要修改babelrc文件

  #.babelrc“ plugins”:[“ react-hot-loader / babel”] 

第三步

在它正常工作之前,需要使用容器包装我在div上渲染的名为App的组件App。 下面是代码

  #client / index.js 
从'react'导入React,{组件};
从'react-dom'导入{render};
从“ ./components/App”导入应用;
从'react-hot-loader'导入{AppContainer};
渲染(



document.getElementById('app')
);
如果(module.hot){
module.hot.accept('./ components / App',()=> {
const App = require('./ components / App')。default;
渲染(



document.getElementById('app')
);
});
}

步骤4

我将需要安装所有必需的模块。

  #终奌站 
npm install --save-dev react-hot-loader @ next webpack-hot-middleware

最后,我现在可以运行服务器,并且每当我对组件进行更改时,浏览器都会自动重新加载以更新内容。

干杯,下次再见

Github资源

注意:可能有很多方法可以实现此功能,这就是我找到实现此功能的最简单方法。 任何人都可以对我可以提出的任何错误或改进发表评论。 本指南最初是供我自己学习和记住我所做的事情,但是,如果发现有很大帮助,欢迎任何人遵循本指南。