反应热加载设置-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资源

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