使用 react-hot-loader

5

经过 @assassin_cike 提醒有这样一个loader,今天试了一下真的非常好用。

hot loader 是干嘛的呢?引用官网的一句话就是

React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.

简单的讲,就是使用 react 编写代码时,能让修改的部分自动刷新。但这和自动刷新网页是不同的,因为 hot-loader 并不会刷新网页,而仅仅是替换你修改的部分,也就是上面所说的 without losing state

用一张图来感受一下:

图片描述

使用

其实官方(点这里)已经介绍的很清楚了,只是可能一些小细节得自己找一下,我在这里就记录一下具体的使用流程吧。

安装

首先是安装 react-hot-loader

npm install --save-dev react-hot-loader

另外 hot-loader 是基于 webpack-dev-server,所以还得安装 webpack-dev-server

npm install --save-dev webpack-dev-server

配置

配置 webpack-dev-server

使用 react-hot-loader 时,首先还是要让 webpack-dev-server 打开。

在根目录新建 server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/')
});

配置 webpack.config.js

然后在 webpack 的配置文件里添加 react-hot-loader。

打开 webpack.config.js

var webpack = require('webpack');

module.exports = {
  // 修改 entry
  entry: [
    // 写在入口文件之前
    "webpack-dev-server/client?http://0.0.0.0:3000",
    "webpack/hot/only-dev-server",
    // 这里是你的入口文件
    "./src/app.js",
  ],
  output: {
    path: __dirname,
    filename: "build/js/bundle.js",
    publicPath: "/build"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        // 在这里添加 react-hot,注意这里使用的是loaders,所以不能用 query,应该把presets参数写在 babel 的后面
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
      }
    ]
  },
  // 添加插件
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

使用

首先运行 server.js(当然你可以在 package.json 里面配置,使用 npm start 运行)

node server.js

然后照常使用 webpack

webpack --display-error-details --progress --colors --watch

问题

发现每次修改后目录下就多了一堆 xxxx.hot-update.jsxxxx.hot-update.json,正在想咋弄。。。


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

20 条评论
assassin_cike · 2016年03月22日

你的webapp有用其他的UI框架吗?

+1 回复

Eyas_Liu · 2016年03月22日

这东西不是过时了吗,作者Dan都不维护了,他的github都说用react-transform代替

+1 回复

assassin_cike · 2016年03月22日

react-transform 能实现css改变也自动刷新吗?

+1 回复

时间被海绵吃了 作者 · 2016年03月22日

没呢 我就是一边学着react一遍练练

回复

assassin_cike · 2016年03月22日

在这里添加 react-hot,注意这里使用的是loaders,所以不能用 query,应该把presets参数写在 babel 的后面,这句话是亮点,之前配置了很久都没配置好!

回复

时间被海绵吃了 作者 · 2016年03月22日

哈哈~一开始我也没注意

回复

assassin_cike · 2016年03月22日

这段话从哪找的?很好奇!

回复

时间被海绵吃了 作者 · 2016年03月22日

因为报错还慢明显 Cannot define 'query' and multiple loaders in loaders list,然后我是对着http://gaearon.github.io/react-hot-loader/getstarted/这篇文章学的,对比了一下发现他的query是跟在jsx后面,不过其实仔细一想query当然要指定是哪一个加载器啦

回复

assassin_cike · 2016年03月22日

awesome

回复

时间被海绵吃了 作者 · 2016年03月22日

哦哦哦 只顾看用法没注意这个 我去看看

回复

Eyas_Liu · 2016年03月22日

当然能,完全的替代react-hot-loader

回复

assassin_cike · 2016年03月23日

css自动刷新是用react-transform怎么配置的?我只配置了组件的自动刷新!

回复

吴隐隐 · 2016年03月23日

好奇这个动画是如何截出来的(直接用屏幕录制软件?

回复

时间被海绵吃了 作者 · 2016年03月23日

我用的GifCam

回复

吴隐隐 · 2016年03月23日

OK,谢谢

回复

皓矾 · 2016年03月24日

gif里的iPhone是chrome的模拟器?还是个插件?

回复

时间被海绵吃了 作者 · 2016年03月24日

? 自己写着玩的

回复

DHJesus · 2016年08月04日

楼主最后一个问题解决了没有

回复

时间被海绵吃了 作者 · 2016年09月13日

灰常惭愧。。木有解决,你有什么好办法不?

回复

yun77op · 2017年12月20日

https://github.com/webpack/we... 使用webpack-dev-server就不会在目录下生成hot-update吧

回复

载入中...