作者：刘一奇

出版社：电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

React与Redux开发实例精解试读：

内容简介

本书共分四部分，全面介绍如何使用React与Redux进行Web开发。第一部分是基础篇，介绍React与Redux的基础知识；第二部分是进阶篇，通过精彩的官方示例学习React与Redux；第三部分是拓展篇，主要学习一些优秀的第三方拓展；第四部分是实战篇，将会带领读者一步步搭建大型Web应用程序。

本书适合熟悉JavaScript编程，有意使用React与Redux搭建Web应用的程序员学习参考。

致读者

这本书是为想要用React、Redux、Babel和Webpack搭建Web应用程序的程序员准备的。与其他技术栈相比，这个技术栈（指的是React、Redux、Babel、Webpack以及社区中众多与此相关的优秀工具）的学习成本并不低，但是其中的智慧与思想却着实令人赞叹：清爽的组件代码结束了满屏HTML标签与类名的噩梦；声明式地将数据映射为界面减少了烦琐的DOM操作；高阶函数、管道、柯里化等函数式编程思想的运用使得复杂逻辑的处理变得相当简单；自动化构建编译技术降低了源代码与静态资源的管理成本。随着时间的推移，技术工具或许很快会更新换代，但是这些前端工程中的最佳实践思想却不会轻易过时。如果你不仅想学习这些技术的使用方法，更想了解这些技术背后所包含的思想与智慧，那么我真诚地建议你阅读本书。

阅读本书之前的准备

想要很好地理解本书的内容，你需要具备一定的Node.js和ES2015、ES2016基础，至少要了解一些常见的概念，例如NPM、模块系统、常量、函数、装饰器和类。除此之外，你最好还熟悉JavaScript程序在服务器和浏览器环境下的调试技术。

学习本书示例代码时，大部分时间都要在命令行中进行操作。因此，你应该能够熟练使用自己操作系统中的命令行工具。

本书附带的程序是开源的，全部上传到了GitHub。这些示例程序中的开发经验来自开源社区和笔者自己的实践思考。我不认为这是使用React与Redux开发Web应用程序的唯一方式。你可以将其作为参考，如果有更好的想法，强烈建议你将其贡献给社区，与更多的开发者一起交流进步。

最后要说明的是，本书因篇幅有限等原因，无法对每一项技术的讲解都做到完整而详尽。因此，你还需要根据书中的提示和推荐，去阅读参考相应技术的官方文档。

本书的内容安排

本书分为四部分。第一部分　基础篇　主要介绍React与Redux的基础知识。● 第1章　简要介绍本书所要讲解的技术，包括React、Redux、

Node与Universal渲染、Babel及Webpack。● 第2章　讲解如何在Node.js中运行React。● 第3章　讲解如何在浏览器中运行React。● 第4章　介绍开发服务器和热替换技术及其实现过程。● 第5章　介绍React的创新语法：JSX。● 第6章　介绍React的数据载体：state、props与context。● 第7章　介绍React的两个对象：ReactElement和组件实例。● 第8章　介绍Redux的action、reducer与store。● 第9章　介绍Redux的action创建函数和Thunk中间件。第二部分　进阶篇　通过精彩的官方示例学习React与Redux。● 第10章　讲解如何手动将Redux连接到React中。● 第11章　讲解如何使用react-redux将Redux连接到React中。● 第12章　介绍Redux的撤销/重做和Redux开发者工具的使用。● 第13章　讲解如何在React与Redux的程序中编写测试。● 第14章　讨论Redux的全局状态与React组件的内部状态。● 第15章　讲解React与Redux中常用的几种数组处理方法。● 第16章　介绍Redux中的异步处理。● 第17章　介绍如何自定义Redux中间件。● 第18章　讲解如何使用React与Redux实现Universal渲染。第三部分　拓展篇　学习一些优秀的第三方拓展。● 第19章　介绍Webpack同构工具。● 第20章　介绍React Router，并通过它实现Universal路由。● 第21章　介绍多页面下的异步处理。● 第22章　介绍了bootstrap-loader、PostCSS、Autoprefixer和

React-Bootstrap。第四部分　实战篇　一步步搭建大型Web应用程序。● 第23章　介绍一个大型项目的基本结构。● 第24章　使用ReduxForm制作各种表单。● 第25章　实现图表与表格。● 第26章　实现用户认证。● 第27章　讲解部署到Heroku的方法，并实现持续集成。● 第28章　列出其他资源。如何使用示例代码

本书使用的示例代码可在GitHub上获取：https://github.com/lewis617/react-redux-book和https://github.com/lewis617/react-redux-heroku。

除了第1章和第28章外，本书每个章节都有一个示例程序。前三部分使用了短而精的示例代码，独立地演示技术的功能。从第四部分开始，每一章的例子都会建立在前一章例子的基础上，最后完成一个大型项目的搭建。

另外，为了方便部署到Heroku，并实现持续集成，第27章的例子被独立到了另一个GitHub仓库中，也就是上述的第二个GitHub仓库。致谢

在写这本书的过程中，家人、朋友、领导、同事都给我了很多帮助。没有他们，我是不可能完成本书的，在此表示由衷的感谢。

首先我要特别感谢王祖超、梁锦津、宋兵、陈仕杰、屈光宇、吕明岩，他们在本书撰写的不同阶段审阅了书稿，并对书稿涵盖的内容和组织方式给予了建设性建议。

还要感谢电子工业出版社的许艳编辑，她对本书进行了出色平稳的编辑，并给予我无尽的支持、建议和协助。

最后，感谢在GitHub社区中为本书提供帮助的人：● Dan Abramov（Redux的作者）● Nikolay Nikolaev（Webpack同构工具的作者）● Erik Rasmussen（ReduxForm的作者）● Eric Ferraiuolo（serialize-javascript的贡献者）● Mihail Diordiev（redux-devtools-extension的作者）

他们积极热心地回复我提交的Issue，为本书提供了重要的技术支持。第一部分 /  基础篇第1章　技术简介React

毫不夸张地说，近年来最让全球JavaScript开发者感到疯狂的事情就是React的横空出世。作为一个构建用户界面的工具库，React被众多知名公司所使用，包括Facebook、Airbnb、Uber、Alibaba等。如果你想进入这些公司工作，那么你应该学习React。

React官方是这样介绍它的：“一个声明式、高效、灵活的、创建用户界面的JavaScript库。”这究竟是什么意思呢？下面我们来逐一解读。

声明式是指只要使用React描述组件的样子就可以改变用户界面。传统方法是命令式地操作DOM，不仅需要记住大量的API，而且还会增加代码的耦合度，使得项目难以维护。React使用自己的魔法改变界面，让开发者最大限度地少与DOM交互，降低了处理视图的难度。

高效主要得益于React的虚拟DOM，以及其Diff算法。传统的Diff算法的复杂度是极高的，而Facebook的工程师巧妙地结合Web界面的特点改进了Diff算法，使其性能出众。拥有了高性能的Diff算法，我们就可以在“刷新”全部界面时只更新需要改变的那部分界面了。也正因为这个原因，React可以使用单向数据流改变界面，抛弃了传统的数据绑定，减少了样板代码和重量。

灵活是指React可以作为视图层与其他技术栈配合使用，比如代替Angular的指令，或者与Redux搭配，等等。

除了上面介绍的这些优点外，React最让人兴奋的莫过于Universal渲染和衍生的React Native项目了。Universal渲染指的是一套代码可以同时在服务端和客户端渲染，这也是本书重点介绍的技术。React Native则让你可以使用前沿的JavaScript为iOS、Android编写跨平台的原生APP。

如果你对React究竟是什么还是很困惑，我的建议是，不用过于纠结，只管先用起来，在实际的使用中慢慢理解它。本书将教你如何用React开发Web程序。Redux

Redux是一个JavaScript状态容器，提供可预测的状态管理。

Redux可以用三条基本原则来描述：单一数据源；state只读；使用纯函数来执行修改。

单一数据源是指整个应用的state被存储在一棵对象树中，并且这个对象树只存在于唯一一个store中。这里的state指的是数据。单一数据源是Redux区别与其他同类工具的一个重要特征。

state只读并不代表我们无法改变state。如果无法改变state，那么程序将不会发生变化。这里“只读”指的是不允许直接对state这个变量重写赋值，但是可以通过action和reducer返回一个新的state，而且只能使用这一方法。

使用纯函数来执行修改是指更新state的reducer只是一些纯函数，它接收先前的state和action，并返回新的state。

了解上述基本原则后，或许你会问：“为什么要使用Redux？”问得好！使用Redux将会给你的项目带来以下这些收益。● 可预测：Redux只有一个数据源，想要修改它只能发起action，

reducer又是纯函数，相同的输入永远会得到相同的输出。这一

切都使得程序运作变得可控、可预测。● 便于组织管理代码：严格而明确的程序结构使得代码更容易组织

和管理，同时也方便了团队协作。● 支持Universal渲染：单一数据源这个原则可以帮助解决Universal

渲染中的数据传递问题，服务端渲染后只需给客户端传递一个变

量即可，这个变量就是存储state的对象树。● 优秀的拓展能力：Redux支持多种拓展方式，但主要是中间件的

拓展。中间件的使用使得原本简单的Redux变得十分强大。例如，

Redux Thunk中间件使Redux的action创建函数具备了异步和条件

判断能力，Logger for Redux中间件则可以为程序添加日志功

能。● 容易测试：编写可测试的代码，最重要的一条规则就是写单一功

能的、没有外界依赖的小型函数。Redux的代码几乎都是这样小

而纯且独立的函数。● 开发工具：开发者可以使用Redux的开发工具去实时追踪、回退

和重放程序中action与state的每个变化。● 社区和生态系统：无论在什么时候，使用什么框架或库，社区和

生态系统都是非常重要的。Redux背后的强大社区使其更加易用。

Reducer的纯函数、不可变、函数组合，中间件的管道、柯里化等这些思想都属于函数式编程的范畴。在Redux中，函数式编程被重度使用，甚至连“Redux”这个名字都充满了浓浓的函数式编程意味（reduce是函数式编程中经常使用的遍历累加数组元素的方法）。函数式编程使得代码变得更加简洁和模块化。熟悉函数式编程对于理解Redux的原理和思想是非常有帮助的。本书将会在介绍Redux的同时，穿插讲解函数式编程的知识。希望你在读完本书后能够感受到Redux与函数式编程之美。Node与Universal渲染

React与Redux既可以在浏览器端运行也可以在服务器端运行。这里的服务器端指的是Node服务器。

和传统Web服务器相比，Node更简单，它是单线程，与平台无关的。最重要的是，它使用了JavaScript这门原来在浏览器中运行的语言，所以我们可以实现Universal渲染——用一套代码在服务端和客户端渲染。

最初所有的渲染都是发生在服务器端的，但是在2005年，AJAX的到来将渲染过程转移到了客户端，通过调用服务器的API获取和修改数据。此后诞生了无数的JavaScript框架来实现客户端渲染和路由控制。但是开发者们意识到一个问题：客户端渲染破坏了搜索引擎的索引，因为搜索引擎无法和JavaScript通话。除此之外，客户端渲染在第一次会加载较多模板和脚本，严重影响了网页打开的速度。

很明显，需要同时在服务端和客户端进行渲染，而且最好公用一套代码。于是Universal渲染出现了。Universal渲染实现了更快的加载速度、更好的SEO、更优雅的交互效果、更容易维护的代码……这一切都关乎你或者你老板的项目利益。作为软件工程师，你应该明白这些，并给予足够的重视，用技术帮助项目盈利。

React与Redux是实现Universal渲染的理想技术组合。本书会重点介绍使用React与Redux实现Universal渲染的最佳实践。Babel

Babel是一个JavaScript编译器，可以让开发者提前使用下一代的JavaScript。Babel可以和各种工具配合使用，包括如下这些工具。● Babel的内建工具：Babel CLI、Require Hook。● 各种构建系统：Webpack、Gulp、Grunt、RequireJs等。● 测试框架：Jasmine、Karma、Mocha等。● 语言API：C#/.NET、Node、Ruby。● 模板引擎：Jade。● 编辑器：WebStorm。● 调试器：Node Inspector等。

本书将在Node和浏览器两个环境中运行React与Redux程序，所以我们需要学习在Node和Webpack中使用Babel。Webpack

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。通过加载器（loader）的转换，任何形式的资源都可以视作模块，比如CommonJs模块、AMD模块、ES2015模块、CSS、图片、JSON、Coffeescript、LESS等。

本书使用到的Webpack的功能主要包括：● 编译、加载使用ES2015和JSX语法的模块。● 实现开发服务器与热替换。● 加载图片文件。● 加载字体文件。● 加载样式文件。● 加载JSON文件。● 使用同构工具实现同构渲染。● 压缩代码。● 哈希命名。总结

React是一个声明式、高效、灵活的、创建用户界面的JavaScript库，它所带来的Universal渲染更是一场革命。Redux是一个JavaScript状态容器，提供可预测的状态管理，单一数据源、只读state等特性使其从同类工具中脱颖而出。而使用Babel和Webpack做编译和构建则是开发React与Redux程序的最佳选择。

从下一章开始，我们将循序渐进地学习如何使用这些现代前端技术。第2章　在Node.js中运行React

本章将介绍如何在Node.js中运行简单的React程序。例子

本章的例子是一个非常简短的小程序：先编写一个React组件，然后在Node.js中将其渲染成HTML字符串并打印出来。

运行方法：npm installnpm start编写React组件

编写React组件通常需要写一个继承自React.Component的类，并在render()中返回你要展现的视图：import React from 'react'export default class App extends React.Component{ render(){ return (

hello world

但如果这个组件只有一个render()方法，可以将其改为更简洁的无状态函数（stateless func-tion），这也是Airbnb编码规范推荐的写法。src/App.jsimport React from 'react';export default function App(){ return

hello world

在上述代码中，返回

hello world

本例使用了JSX语法。JSX是一个看起来很像XML的JavaScript语法扩展，这种语法允许你在JavaScript中写闭合的标签。也正是因为JSX语法的使用，尽管这里表面上没有用到React这个顶层API，但是仍然需要导入它。在本章我们主要讲解程序的运行，关于JSX语法，会在后面的章节详细介绍。在Node.js中渲染组件

编写完React组件，我们先在src/server.js中导入该组件，然后将其渲染成一个HTML字符串并打印出来。在Node.js中，应该使用renderToString()方法将组件渲染成字符串。src/server.jsimport React from 'react';import{renderToString}from 'react-dom/server';import App from './App';const appHTML=renderToString();console.log(appHTML);

至此，整个程序的代码就写完了。下面将介绍如何使用Babel编译运行这个程序。使用Babel编译运行Node.js程序

本章的示例程序采用了ES2015语法和JSX语法，需要通过Babel编译运行。在测试环境中，通常使用Require Hook来运行需要Babel编译的Node.js程序。Require Hook简介

Require Hook是Babel的一个内建工具，用于在测试环境下编译运行Node.js程序。Require Hook的工作原理是在require方法上加上一个钩子。此后，每次使用require加载JavaScript文件时，就会先用Babel进行编译。

Bebel的运行工具很多，可以使用内建的命令行工具，也可以配合各种构建工具，如Gulp或Webpack。如果你之前没有用过Babel，强烈建议安装使用命令行工具Babel CLI，体验Babel的编译过程。Babel CLI的用法请参考官网文档（https://babeljs.io/）。

使用Require Hook的优势在于将编译和运行这两个步骤合二为一。不过注意，因为性能消耗较大等原因，这个方法只能用于测试环境。如果要在生产环境中运行Node.js程序，需要先编译再运行。使用Require Hook的步骤

使用Require Hook共四个步骤。

1．安装babel-register（npm install包含了这个安装过程，可以在package.json中查看）：npm install babel-register--save-dev

2．在入口文件顶部添加require("babel-register")。index.jsrequire('babel-register');require('./src/server.js');

3．安装ES2015和React的预设：npm install --save-dev babel-preset-es2015 babel-preset-react

4．添加配置文件.babelrc，激活ES2015和React的预设：{"presets":["react","es2015"]}

如此一来，在命令行输入npm start （npm start指向node index ，可以在package.json中查看），就可以运行这个程序了。

ES2015和React的预设分别用于编译ES2015语法和JSX语法。作为一个JavaScript编译器，Babel之所以可以按照各种要求编译JavaScript代码文件，是因为使用了各种插件和预设（预设是插件的打包封装）。插件或者预设是编译任务的核心“执行者”。如果没有配置插件或者预设，即便运行Babel，也只是复制了源代码而已。如果你想更多地了解ES2015和React预设，可以参考Babel的官网文档。总结● 编写React组件通常需要写一个继承自React.Component的类，

并在render()中返回你要展现的视图。但如果这个组件只有一个

render()方法，推荐将其改为更为简洁的无状态函数。● 在Node.js中使用renderToString()方法将组件渲染成字符串。● 在测试环境中，通常使用Require Hook来运行需要Babel编译的

Node.js程序。第3章　在浏览器中运行React

尽管React可以跨平台运行，但毫无疑问浏览器仍然是React的主战场。本章将会介绍如何在浏览器中渲染React组件。例子

本章例子的功能是在浏览器中渲染React组件，运行结果是在浏览器中输出hello world。先安装依赖，然后使用Webpack打包编译，最后运行：npm installnpm run buildnpm start组件复用

本例中的App.js是直接从第2章的例子中复制粘贴过来的：src/App.jsimport React from 'react';export default function App(){ return

hello world

便于复用是React组件一个很大的优点。React社区非常活跃，有成千上万的开发者在编写React组件，我们完全可以从中挑选适合自己的组件，复制粘贴后使用，节省精力。

当然，除了便于复用外，组件化还有很多优点，比如，分开管理代码、减小耦合度等。事实上，不只是React，任何能撑起大型项目的框架、类库都会提供组件化或模块化的解决方案。在浏览器中渲染React组件

与在Node.js中渲染的方法不一样，在浏览器中渲染React组件使用了react-dom的render()方法：src/client.jsimport React from 'react';import{render}from 'react-dom';import App from './App';render((), document.querySelector('#app'));

以上代码将渲染到ID为app的标签中：index.html...

至此，整个程序的代码就写完了。下面将介绍如何使用Webpack将上述代码打包编译成可以在浏览器中运行的脚本文件。使用Webpack打包编译

这个程序使用了ES2015语法和JSX语法，浏览器目前还不能完全支持，所以需要使用Web-pack打包编译源代码。

因为Webpack本身只有打包功能，所以这里还需要通过引入babel-loader来实现编译功能。使用babel-loader不是必需的，假如先使用Babel CLI编译源代码，再使用Webpack打包，就不需要再配置babel-loader了。如果你之前没有使用过Webpack，强烈建议先阅读Webpack官网的入门文档（https://webpack.github.io/）。

下面将介绍使用Webpack和babel-loader打包编译程序的具体步骤。

1．安装Webpack和babel-loader：npm install--save-dev webpack babel-loader babel-core

2．添加webpack.config.js文件来指定打包编译的配置信息：module.exports={ entry:'./src/client', output:{ path:__dirname+'/static/dist', filename:'main.js' }, module:{ loaders:[{test:/\.js$/, exclude:/node_modules/, loaders:['babel']}] }};

entry表示入口文件，output中的path表示输出目录，filename表示输出的文件名称。只有下面这部分配置信息是用于babel-loader的：module:{ loaders:[{test:/\.js$/, exclude:/node_modules/, loaders:['babel']}] }

它的意思是除了/node_modules/目录下的文件之外，其他所有符合/\.js$/正则表达式的文件都将使用babel-loader编译。

3．安装ES2015和React的预设：npm install--save-dev babel-preset-es2015 babel-preset-react

4．添加配置文件.babelrc：{ "presets":["react","es2015"]}

现在在目录下运行npm run build命令（npm run build指向webpack）来打包和编译，结果成功生成了可以在浏览器中运行的脚本文件，它的路径为static/dist/main.js。在浏览器中运行

打包编译工作完成后，我们将生成的JavaScript脚本文件添加到index.html中。

然后在目录下运行npm start命令（npm start命令指向http-server）。此时，在这个目录下已经启动了一个服务，在浏览器中打开这个服务的路径就可以运行index.html了。总结● 一个React组件既可以在Node.js中渲染，也可以在浏览器中渲染。● 渲染组件到DOM节点中时使用了react-dom的render()方法。● 浏览器目前无法直接运行用ES2015和JSX语法编写的JavaScript

脚本，需要使用Web-pack和babel-loader打包编译。第4章　开发服务器和热替换

在第3章的示例程序中，每次修改代码后，都必须执行一次npm run build命令进行编译，然后再刷新浏览器，开发调试效率非常低下。为了避免这种低效的重复工作，本章的例子使用了开发服务器（webpack-dev-server）和热替换（hot reloading ）技术。开发服务器能够在指定端口提供资源服务，配合热替换则可以自动监视代码的变动，重载被修改的模块，不仅不需要刷新浏览器，甚至连程序原来的状态都可以被保留下来（刷新浏览器会重置程序状态），极大地方便了开发调试。下面让我们来学习使用这个技术。

注意，本章涉及的概念很多，包括Babel、Webpack、源代码映射和Express中间件等，对于初学者而言，很难在短时间内掌握。如果对本章内容感到吃力，请不要细究每个知识的内部原理，先学习使用方法。随着日后开发经验的增长，之前有困惑的知识原理慢慢就会理解了。例子

本章例子使用了开发服务器和热替换在浏览器中运行React程序，尝试改变React组件的代码，看看会发生什么。

运行方法：npm installnpm start安装

npm install命令已经安装了package.json中dependencies和devDependencies选项下的所有NPM包，所以这里无须重复安装。但是在你自己项目中，假设已经安装了React和Express，那么你还需要安装这些包：npm install--save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-react-hmre webpack webpack-dev-middleware webpack-hot-middleware

在以上这些包中，有很大一部分都已经在前面的章节中接触过了。下面几节将会介绍如何配置Babel、Webpack和Express服务器，并在这个过程中讲解其他包的功能与用法。配置Babel

热替换是指当修改部分代码后，程序会自动编译、替换被修改的代码，不需要重新编译所有代码，也不需要刷新浏览器。既然热替换涉及编译，所以首先应该配置Babel。下面将介绍配置Babel的具体细节。使用react-hmre预设

配置Babel使其支持热替换的最快捷的方法是使用react-hmre预设：.babelrc{ "presets":["es2015","react"], "env":{ "development":{ "presets":["react-hmre"] } }}

上述配置在ES2015和React预设的基础上，增加了react-hmre这个预设，并且限制只在开发环境下使用。

注意，这里并不一定非要使用react-hmre这个预设，也可以自己配置。事实上，Ba-bel的预设也只是对配置的打包封装而已。如果你想了解react-hmre这个预设的具体细节，可以查看它的GitHub仓库（https://github.com/danmartinez101/babel-preset-react-hmre）。react-hmre的功能

总体来说，react-hmre这个预设主要包含两个功能：热替换React模块和捕捉错误。

热替换React模块

react-hmre这个预设的第一个功能是热替换React模块。如果没有这个预设，在代码变动时，将无法正确地重新载入React模块。尝试删除这个预设的配置信息：{ "presets":["es2015","react"],- "env":{- "development":{- "presets":["react-hmre"]- }- }}

重新npm start，然后修改你的React组件，比如加个console.log()，结果在浏览器控制台里出现了警告信息。

捕捉错误

另外，react-hmre这个预设还可以捕捉错误，并将包含错误堆栈信息的红色警告页面输出到浏览器中。export default class App extends Component{ render(){ throw new Error(); return

hello world

注意，如果将无状态函数放在组件顶层，热替换将会出错。所以本章示例程序将src/App.js中的无状态函数改成了类组件。

尝试在组件中抛出一个错误对象，结果浏览器中输出了警告页面，如图4-1所示。图4-1配置Webpack

开发服务器是可以为程序提供资源服务的服务器。通常情况下，在页面中引入的脚本文件等静态资源都放在硬盘中。但是，使用了开发服务器，这些资源将被读到内存里，然后我们可以通过开发服务器的端口来访问这些资源。开发服务器结合热替换可以实现监视代码变动，即时更新界面的功能。因为开发服务器是通过Webpack实现的，因此在搭建服务器前需要先配置Webpack：webpack.config.jsvar path=require('path');var webpack=require('webpack');module.exports={ devtool:'cheap-module-eval-source-map', entry:[ 'webpack-hot-middleware/client', './index.js' ], output:{ path:path.join(__dirname, 'dist'), filename:'bundle.js', publicPath:'/static/' }, plugins:[ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin() ], module:{ loaders:[ { test:/\.js$/, loaders:['babel'], exclude:/node_modules/, include:__dirname } ] }};

这个Webpack配置文件的选项解释如下。● devtool是开发工具，它的作用是生成源代码映射（Source

Map），方便调试。 源代码映射记录了打包编译后的代码和源代

码之间的位置对应关系。它可以让你在控制台查找日志（或错

误）来源时，直接跳转到源代码中，而不是打包编译后的代码。

如果你第一次接触源代码映射，可以在代码中打印一段信息或抛

出错误，然后打开浏览器的开发者工具，点击日志右边的链接（例如图4-2中的App.js?14b1:8）试试。 开发工具有若干个模式

可以选择，它们的区别主要在于构建速度和源代码映射的质量。

这里选择cheap-module-eval-source-map。这个模式构建速度适

中，而且会生成较好的源代码映射，适合在开发环境中使用。更

多开发工具模式的介绍，请查阅Webpack官网文档。图4-2● entry是入口文件，本例的入口选项包括：● 程序的入口文件./index.js。● 用于热替换功能的webpack-hot-middleware/client。webpack-hot-

middleware/client的工作原理是：先连接上服务器，等着接受需

要重新编译代码的通知，一旦代码变动，就会收到通知进而更新

客户端代码。● output是输出配置。下面是输出选项中各个子选项的含义：● path表示输出的硬盘路径，不过本例中编译好的代码放在内存

中，故此项无用。● filename表示输出的文件名称。● publicPath则表示公共路径，即所有资源的URL前缀。比如，如

果你的HTML页面中有一个

试读结束[说明：试读内容隐藏了图片]

下载完整电子书