使用 react-hot-loader - 推酷
使用 react-hot-loader
经过@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 打开。
在根目录新建
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
// 写在入口文件之前
&webpack-dev-server/client?http://0.0.0.0:3000&,
&webpack/hot/only-dev-server&,
// 这里是你的入口文件
&./src/app.js&,
path: __dirname,
filename: &build/js/bundle.js&,
publicPath: &/build&
loaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
// 在这里添加 react-hot，注意这里使用的是loaders，所以不能用 query，应该把presets参数写在 babel 的后面
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
// 添加插件
plugins: [
new webpack.HotModuleReplacementPlugin()
（当然你可以在 package.json 里面配置，使用 npm start 运行）
node server.js
然后照常使用 webpack
webpack --display-error-details --progress --colors --watch
发现每次修改后目录下就多了一堆
xxxx.hot-update.js
xxxx.hot-update.json
，正在想咋弄。。。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致Webpack-dev-server结合后端服务器的热替换配置 - 简书
下载简书移动应用
写了22088字，被225人关注，获得了757个喜欢
Webpack-dev-server结合后端服务器的热替换配置
Webpack是一个模块加载器，这里所谓模块其实就是项目中用到javascript、coffeescript、css、less、jsx以及图片等等资源，Webpack采用不同的loader将这些资源加载后打包，然后输出打包后的文件，打包后的文件可以是一个或多个js文件，也可以根据需要分别打包，比如将所有css文件单独输出。下图可以比较直观的说明webpack是做什么的。
更多信息可以参考webpack的 Webpack有一个很实用的功能叫做热替换（Hot-replace），尤其是结合React Hot Loader插件，开发过程中都不需要刷新浏览器，任何前端代码的更改都会实时的在浏览器中表现出来。首先需要安装Webpack-dev-server,一个轻量的node.js express服务器。npm install webpack-dev-server --save-devWebpack-dev-server十分小巧，这里的作用是用来伺服资源文件，不能替代后端的服务器，因此如果你还要进行后端开发，就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)配置双服务器热替换模式首先需要修改Wepack.config.js的entry条目entry: [
'webpack-dev-server/client?http://0.0.0.0:9090',//资源服务器地址
'webpack/hot/only-dev-server',
'./static/js/entry.coffee']注意，由于要结合了后端服务器，因此不采用entry: {
app: ['webpack/hot/dev-server', './app/main.js']}这种形式。接下来修改output条目,将publicPath设置为webpack-dev-server服务器下资源目录的绝对路径output: {
publicPath: "http://127.0.0.1:9090/static/dist/",
path: './static/dist/',
filename: "bundle.js"}在Plugins中增加new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'}),new webpack.HotModuleReplacementPlugin()webpack变量需要在Webpack.config.js的开始处声明var webpack = require('webpack');接着中页面文件中插入打包后的资源文件，注意这里要采用资源服务器的绝对路径&script src="http://127.0.0.1:9090/static/dist/bundle.js"&&/script&双服务器的原理其实就是让后端服务器伺服的页面加载资源服务伺服的资源。如果要实现react的热加载，还需要 ，npm install react-hot-loader --save-dev然后将react-hot loader放在jsx文件loader链的第一位{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }最后就是启动Webpack-dev-server服务器，注意这里要采用inline模式， 如果采用hot模式会出现错误。--content-base 为资源文件夹。另外如果你想用另一台电脑做调试，需要增加--host参数为开发服务器的IP地址，因为默认只能通过localhost进行方式。如果IP地址经常变动，可以写一个脚本方便每次启动服务器
ip=`awk '/inet / && $2 != "127.0.0.1"{print $2}' &(ifconfig)`
node webpack-dev-server.js --port 9090 --inline --host $ip --content-base static/dist/
当资源文件修改时，webpack-dev-server将通过socket.io通知客户端更新．关于Webpack-dev-server的更多资料请
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
如果你是程序员，或者有一颗喜欢写程序的心，喜欢分享技术干货、项目经验、程序员日常囧事等等，欢迎投稿《程序员》专题。
专题主编：小...
· 156465人关注
干货技术文。
· 3288人关注
关于前端 , Elixir , Phoenix 的各种小 talk
· 520人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：React+ES6+Webpack深入浅出 - 陈子瑜 - 博客园
随笔 - 2, 文章 - 0, 评论 - 0, 引用 - 0
& & React已成为前端当下最热门的前端框架之一 ， 其虚拟DOM和组件化开发让前端开发更富灵活性，而Webpack凭借它异步加载和可分离打包等优秀的特性，更为React的开发提供了便利。其优秀的特性不再赘述。本文将详细的记录react babel webpack的环境搭建，以及搭建的过程中遇到的一些坑。
一、新建React项目
1、如图为新建react项目结构，其中 entry.js放置react入口代码，index.js放置react组件代码，assets文件是webpack打包之后生成文件的存放地址。
由于react代码需要jsx来写，所以我们修改编辑器里的配置。我使用的是mac版的webstorm，在如下图地方修改jsx提示配置
首先你得安装npm 同时命令行输入,新建node_modules
npm install
2、输入如下命令安装react模块
npm i --save react
由于react升级后把reactDOM独立出来 ，所以我们还需要安装 react-dom
npm install react-dom --save-dev
具体react代码在安装完webpack后介绍
二、安装webpack
1、什么是Webpack？
事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包
2、安装webpack
sudo npm install -g webpack
本项目安装
npm install webpack --save-dev
3、webpack配置
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
在根目录新建js文件 webpack.config.js
文件内容大概如下
* Created by mac on 16/7/14.
var webpack = require('webpack');
var path = require('path');
module.exports = {
//页面入口文件配置
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/only-dev-server',
'./js/entry.js'
//入口文件输出配置
path: __dirname + '/assets/',
filename: 'bundle.js'
//加载器配置
loaders: [
test: /\.css$/,
loader: 'style-loader!css-loader'
test: /\.js$/,
loader: 'jsx-loader?harmony'
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
test: /\.js|jsx$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0'],
include: path.join(__dirname, 'js')
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.scss']
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
这里对Webpack的打包行为做了配置，主要分为几个部分：
& & entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
& & resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全
& & module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是 .js 结尾的文件都是用 babel-loader 做处理，而 .jsx 结尾的文件会先经过 jsx-loader 处理，然后经过 babel-loader 处理。当然这些loader也需要通过 npm install 安装
& & plugins: 这里定义了需要使用的插件，这里使用了react-hot会在之后介绍
安装loader示例
npm install jsx-loader --save-dev
在我的webpack.config文件中，文件入口为 js/entry.js，entry中的index数组为之后使用的react-hot配置，若不使用插件则为
index: './js/entry.js'
打包后的出口为assets/bundle.js
三、安装babel
1、为什么babel
能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。
2、安装babel
npm install -g babel
完成后可用命令`sudo babel --help`查看是否安装成功
Babel提供babel-cli工具，用于命令行转码。
npm install babel-cli --save-dev
如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。
npm install babel-core --save-dev
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 首先新建.babelrc文件 文件默认如下
"presets": [],
"plugins": []
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
之后在.babelrc文件中加入配置
"presets": [
"plugins": [] }
同时安装babel-loader
npm install babel-loader --save-dev
这时在webpack.config文件中loader中加入配置,让打包时加载babel
test: /\.js|jsx$/, loaders: ['babel?presets[]=es2015,presets[]=react,presets[]=stage-0']
注意！这里presets的顺序要和.babelrc的顺序一致
自此 模块的安装到此结束。
四、react代码
接下来，我们来看看具体的demo代码
1、index.html
&!DOCTYPE html&
&script src="build/jquery-2.1.4.js"&&/script&
&script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"&&/script&
&link rel="stylesheet" href="css/css.css"&
&script src="build/JSXTransformer.js"&&/script&
&link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"&
&div id="react"&&/div&
&script type="text/jsx" src="assets/bundle.js"&&/script&
我们引入最基本的jquery,bootstrap，其中注意的是需要引入JSXTransformer.js用来把jsx代码代码转换成浏览器读得懂的js代码。
之后我们需要引入的是webpack打包完成之后的bundle.js文件。
2、index.js
* Created by mac on 16/7/15.
//组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。例如return &h1 className="mt10 ml10"&chen&/h1& &p&wang&/p&
import React from 'react'
class RefExa ponent {
constructor(props) {
super(props);
this.state = {
value: 'Hello!',
opacity: 1
handleClick() {
this.refs.myInputEl.focus();
return true
handleChange() {
this.setState({value: event.target.value});
console.log(this.state.value);
componentWillMount() {
console.log('WillMount')
componentDidMount() {
console.log('DidMount');
var that = this;
this.setState({
foo: 'Hello',
bar: 'React'
this.timer = setInterval(function() {
var opacity = this.state.
opacity -= 0.1;
if(opacity & 0) {
clearInterval(that.timer);
this.setState({
opacity: opacity
}.bind(this),1000)
stopTimer() {
clearInterval(this.timer);
this.setState({
opacity: 1
componentDidUpdate(props,states) {
console.log(props);
console.log(states);
render() {
console.log('render');
var value = this.state.
&form name="form" noValidate&
&div className="form-group"&
&label className="control-label col-sm-2"&operate virtualDom&/label&
&div className="col-sm-9"&
&input placeholder="focus" type="text" name="myInputEl" onChange={this.handleChange.bind(this)} value={value} ref="myInputEl" /&
&footer className="col-sm-12"&
&button onClick={this.handleClick.bind(this)} className="btn btn-success"&focus {this.props.from}&/button&
&h2 style={{opacity: this.state.opacity}} className="col-sm-1"&{this.state.foo}&/h2&
&h2 className="col-sm-11"&{this.state.bar}&/h2&
class ParentNode ponent {
constructor(props) {
super(props);
this.state = {
foo: 'hello'
handleClick() {
this.refs.childNodeRef.stopTimer();
render() {
var fooArr = ['foo','bar','baz'];
&div className="col-sm-12"&
&RefExa from="input" ref="childNodeRef"&&/RefExa&
&button className="btn btn-default" onClick={this.handleClick.bind(this)}&stop childNode timer&/button&
fooArr.map(function(v,i) {
return &button key={i} className="ml10 btn btn-danger"&{v}{i}&/button&
export default ParentNode
//子节点通过props获取父节点数据 父节点通过ref控制子节点
这里是用es6写法的react代码，首先import React 引入加载好的react模块，具体代码逻辑不再赘述，其中值得注意的是
1、使用map循环渲染时需要加上key={i},使react能够按照index渲染
2、 es6写法中 需要在绑定事件时在之后加上bind(this) ，例如
onChange = {this.handleChange.bind(this)}
3、最后 需要export default &component Name&用于暴露组件
3、entry.js
import React from 'react';
import ReactDom from 'react-dom';
import ParentNode from './index.js';
ReactDom.render(
&ParentNode&&/ParentNode&,
document.getElementById('react')
引入React ReactDom 和写好的组件ParentNode
之后&ReactDom.render&渲染组件
最后在命令行输入&
webpack --display-error-details
打包项目，--display-error-details用于查看报错详情
最后我们在浏览器中打开项目
五、超赞的react插件 react-hot
& & Webpack本身具有运行时模块替换功能，称之为&(HMR)。当某个模块代码发生变化时，Webpack实时打包将其推送到页面并进行替换，从而无需刷新页面就实现代码替换。这个过程相对比较复杂，需要进行多方面考虑和配置。而现在针对React出现了一个第三方加载器，使用这个加载器就可以轻松实现React组件的热替换，非常方便。其实正是因为React的每一次更新都是全局刷新的虚拟DOM机制，让React组件的热替换可以成为通用的加载器，从而极大提高开发效率。
1、安装react-hot 和&webpack-dev-server
npm install --save-dev webpack-dev-server react-hot-loader
通过这种方式指定资源热启动对应的服务器，然后需要配置&react-hot-loader到loaders的配置当中，比如我的所有组件代码全部放在scripts文件夹下：
test: /\.js|jsx$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0'],
include: path.join(__dirname, 'js')
并且需要引入path
var path = require('path');
同时引入插件
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
入口配置应为
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/only-dev-server',
'./js/entry.js'
这时完整的webpack.config.js文件如下
* Created by mac on 16/7/14.
var webpack = require('webpack');
var path = require('path');
module.exports = {
//页面入口文件配置
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/only-dev-server',
'./js/entry.js'
//入口文件输出配置
path: __dirname + '/assets/',
filename: 'bundle.js'
//加载器配置
loaders: [
test: /\.css$/,
loader: 'style-loader!css-loader'
test: /\.js$/,
loader: 'jsx-loader?harmony'
//{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
test: /\.js|jsx$/, loaders: ['babel?presets[]=es2015,presets[]=react,presets[]=stage-0']
test: /\.js|jsx$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0'],
include: path.join(__dirname, 'js')
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.scss']
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
2根目录新建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,
noInfo: false,
historyApiFallback: true
}).listen(5000, '127.0.0.1', function (err, result) {
if (err) {
console.log(err);
console.log('Listening at localhost:5000');
此时端口号应与webpack.config.js中entry的端口号一致
大功告成后 命令行执行
webpack --display-error-details
node server.js
之后在浏览器中输入http://localhost:5001/index.html
即可查看项目，这时修改代码，不需要刷新就可以时时重新渲染，是不是非常便利的功能！
感谢阅读！如有疑问可留言，即使回复！
参考&&/articles/BrAVv2y 轻松入门React和Webpack
/blog/2016/01/babel.html 阮一峰的网络日志收藏成功！
添加标签来管理你的收藏
选择标签：
删除提示：
删除收藏标签，该标签下的内容将自动移至未加标签收藏中，确认要删除该标签吗？
确定要取消收藏吗？
关注成功！
关注精选邮箱：
尚未设置接收邮箱
取消关注后，将无法收到该知识库相关的知识动态和关注周报哦！确定要取消本知识库的关注吗？
技术领域：10:06:01 UTC
用Webpack 打包 React+Jsx 的文件为什么会很大呢？打包后的文件build.js：2000多kb源文件：5K用webpack命令（没压缩），结果build.js 2996kb用webpack -p 命令（压缩），结果build.js 2188kb
文件都非常大（当然node_modules/react下的那些文件本身就非常大。）2000多kb的文件直接在页面引入好吗？有没有办法进一步压缩呢？
10:07:08 UTC
里边是有什么模块啊, 除了 React?
10:13:10 UTC
第一，不要把react打包进去，webpack打包出来的比facebook的lib文件体积要大第二，贴个package.json来看看
10:13:18 UTC
就三个模块react、react-router、jquery
10:13:54 UTC
jquery……
10:16:11 UTC
"name": "",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
"repository": {
"type": "git",
"keywords": [
"reactjs",
"boilerplate",
"author": "",
"license": "MIT",
"homepage": "",
"devDependencies": {
"babel-core": "^5.4.7",
"babel-eslint": "^3.1.9",
"babel-loader": "^5.1.2",
"eslint-plugin-react": "^2.3.0",
"react-hot-loader": "^1.2.7",
"webpack": "^1.9.6",
"webpack-dev-server": "^1.8.2"
"dependencies": {
"react": "^0.13.0"
package.json文件
10:18:53 UTC
webpack.config.js文件
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./public/index'
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
resolve: {
extensions: ['', '.js', '.jsx']
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
10:21:22 UTC
你的dependencies里没有 react-router、jquery，打包应该不行的啊
10:23:41 UTC
jquery的源码应该会比较大的，这些比较公用的库个人建议最好不要打包，做cdn
10:31:52 UTC
webpack 打包的时候是会把
package.json里面的依赖项打包吗？？还是只是打包webpack.config.js里面配置的入口文件、和对应的loader呢？？
10:44:47 UTC
coocssweb：
devtool: 'inline-source-map',
开了inline-source-map当然大
11:04:34 UTC
生产环境，请使用 devtool: false
03:14:43 UTC
开了source-map的问题
12:48:02 UTC
我的打包出来200KB (压缩后)
02:14:22 UTC
已解决。如上关闭source-map功能。打包后，200多KB.thank you everybody
12:30:01 UTC
可是还是变大了啊,就如你说的,本来只有5K,现在有200多K.为什么还要打包
12:45:53 UTC
为什么还用jq？
建议看看这个