React+Redux前端开发实战 PDF下载

编辑推荐

【本书特色】

阿里巴巴钉钉前端技术专家核心等三位大咖力荐

全面、深入分享资深前端技术专家多年一线开发经验

详解95个示例、1个项目案例，均给出了翔实的源代码及代码解读

React入门à React应用实践àReact企业级项目开发

React应用设计àReact应用创建àReact应用开发

详解React.js服务端渲染，以更短时间掌握JavaScript全栈开发

详解Webpack、Babel、ES6和Node.js等*的前端技术混合应用

不但对React及Redux前端开发做了介绍，而且也对其周边生态做了介绍

【3位专家推荐】

阿里巴巴钉钉前端技术专家核心

宋小菜Scott

贝贝集团大前端架构负责人Early

【本书精华内容】

ES6语法

React.js diff算法介绍（时间复杂度）

React组件

React表单和事件

React数据流管理

React路由

React的性能及性能优化

React服务端渲染

自动化测试

React Redux搭建社区项目

；

内容简介

本书是一本React入门书，也是一本React实践书，更是一本React企业级项目开发指导书。全书系统地介绍了以React.js为中心的各种前端开发技术，可以帮助前端开发人员系统地掌握这些知识，提升自己的开发水平。

本书共9章，依次介绍了用Webpack构建项目、模块化与组件开发、React中的事件系统与表单、React Redux数据流管理、react-router路由、React性能优化原理与方法、React服务端渲染、自动化测试工具与实战，*后通过一个企业级项目开发实战案例，带领读者进一步夯实并实践React知识。

本书是一本大前端学习入门与实战读物，不仅适合React开发人员阅读，也适合跨平台开发的前端人员阅读，而且还可以作为React开发的“字典”供开发人员随时翻阅。

作者简介

徐顺发（Allan）；贝贝集团前端技术专家。爱折腾，热衷于技术研究和技术分享。主攻前端架构和各类框架，擅长React.js、Vue.js和Node.js等主流技术栈。曾经获得了2018年SegmentFault Hackathon区块链黑客马拉松冠军。

React+Redux前端开发实战 PDF下载

第1章 ； React入门 ； ； ； ； ； 1
1.1 ； 开始学习React之前 ； ； ； 1
1.1.1 ； 下载与使用Node.js和NPM ； ； ； 1
1.1.2 ； 模块打包工具之Browserify ； ； ； 2
1.1.3 ； 模块打包工具之Webpack ； ； ； ； ； ； 3
1.1.4 ； 第一个Webpack构建实战 ； ； ； ； ； ； 6
1.1.5 ； Webpack loader实战 7
1.1.6 ； Webpack配置详解 ； ； ； 9
1.1.7 ； ES 6语法 ； ； 15
1.2 ； React简介 ； ； ； ； 22
1.3 ； React的特征 23
1.3.1 ； 组件化 ； ； ； ； ； ； 23
1.3.2 ； 虚拟DOM ； 24
1.3.3 ； 单向数据流 ； ； ； ； ； ； 25
1.4 ； JSX语法 ； ； ； ； ； 25
1.4.1 ； JSX简介 ； ； ； 25
1.4.2 ； JSX的转译 ； ； ； ； ； ； 27
1.4.3 ； JSX的用法 ； ； ； ； ； ； 29
1.5 ； Hello World实战训练 ； 34
1.5.1 ； 不涉及项目构建的Hello World ； ； ； ； ； 34
1.5.2 ； 基于Webpack的Hello World ； 35
1.5.3 ； Hello World进阶 ；     39
第2章  React的组件  44
2.1  组件的声明方式   44
2.1.1  ES 5写法：React.createClass()       44
2.1.2  ES 6写法：React.Component  45
2.1.3  无状态组件       46
2.2  组件的主要成员   47
2.2.1  状态（state）    47
2.2.2  属性（props）   49
2.2.3  render()方法      49
2.3  组件之间的通信   52
2.3.1  父组件向子组件通信       52
2.3.2  子组件向父组件通信       53
2.3.3  跨级组件通信   54
2.3.4  非嵌套组件通信       56
2.4  组件的生命周期   58
2.4.1  组件的挂载       58
2.4.2  数据的更新过程       60
2.4.3  组件的卸载（unmounting）    61
2.4.4  错误处理   61
2.4.5  老版React中的生命周期 62
2.4.6  生命周期整体流程总结   63
2.5  组件化实战训练——TodoList    64
第3章  React的事件与表单      70
3.1  事件系统      70
3.1.1  合成事件的事件代理       70
3.1.2  事件的自动绑定       71
3.1.3  在React中使用原生事件 73
3.1.4  合成事件与原生事件混用       73
3.2  表单（Forms）    75
3.2.1  受控组件   75
3.2.2  非受控组件       77
3.2.3  受控组件和非受控组件对比   78
3.2.4  表单组件的几个重要属性       80
3.3  React的样式处理 80
3.3.1  基本样式设置   80
3.3.2  CSS Modules样式设置    82
第4章  React Redux数据流管理     86
4.1  Flux架构      86
4.1.1  MVC和MVVM 86
4.1.2  Flux介绍   90
4.1.3  深入Flux   91
4.1.4  Flux的缺点       96
4.1.5  Flux架构小结   97
4.2  Redux状态管理工具   97
4.2.1  Redux简介 97
4.2.2  Redux的使用场景    98
4.2.3  Redux的动机    99
4.2.4  Redux三大特性 99
4.2.5  Redux的组成——拆解商城购物车实例 100
4.2.6  Redux搭配React使用     105
4.3  middleware中间件      109
4.3.1  为何需要middleware       109
4.3.2  深入理解middleware       109
4.4  Redux实战训练——网上书店   113
4.4.1  目录结构   113
4.4.2  应用入口 src/index.js       114
4.4.3  Action的创建和触发       116
4.4.4  Reducer的创建  118
4.4.5  UI展示组件的创建  122
4.4.6  发起一个动作Action（添加商品到购物车）       124
第5章  路由       127
5.1  前端路由简介      127
5.2  前端路由的实现原理   127
5.2.1  history API方式       128
5.2.2  Hash方式   129
5.3  react-router路由配置   130
5.3.1  react-router的安装    131
5.3.2  路由配置   131
5.3.3  默认路由   132
5.3.4  路由嵌套   133
5.3.5  重定向       133
5.4  react-router下的history      134
5.4.1  browserHistory模式  134
5.4.2  hashHistory模式       135
5.4.3  createMemoryHistory模式       135
5.5  react-router路由切换   135
5.5.1  Link标签   135
5.5.2  history属性       136
5.5.3  传参   137
5.6  进入和离开的Hook     137
5.6.1  onEnter简介     137
5.6.2  onLeave简介     138
第6章  React的性能及性能优化      139
6.1  diff算法       139
6.1.1  时间复杂度和空间复杂度       139
6.1.2  diff策略    141
6.1.3  key属性     148
6.2  组件重新渲染      149
6.3  PureRender纯渲染      152
6.4  Immutable持久性数据结构库    153
6.4.1  Immutable的作用     153
6.4.2  Immutable的优缺点 155
6.4.3  Immutable和原生JavaScript对象相互转换   156
6.4.4  Immutable中的对象比较 156
6.4.5  Immutable与React配合使用   157
第7章  React服务端渲染  159
7.1  客户端渲染和服务端渲染的区别      159
7.2  在React中实现服务端渲染       160
7.2.1  为何需要服务端渲染       160
7.2.2  服务端渲染中的API       161
7.2.3  渲染方法   161
7.2.4  状态管理   165
7.2.5  Express框架简介      166
7.2.6  路由和HTTP请求    169
7.3  实战训练——服务端渲染   172
7.3.1  项目结构   172
7.3.2  项目实现   172
第8章  自动化测试    178
8.1  测试的作用   178
8.2  单元测试简介      178
8.3  测试工具      180
8.3.1  常见的测试工具       180
8.3.2  React的测试工具     181
8.3.3  单元测试工具Jest    181
8.3.4  单元测试工具Enzyme     187
8.4  Jest和Enzyme实战训练     189
8.4.1  Jest和Enzyme的配置     191
8.4.2  测试From组件视图和单击事件     193
8.4.3  测试ListItems组件视图   196
第9章  实战——React Redux搭建社区项目  198
9.1  项目结构      198
9.2  Less文件处理      198
9.3  路由和Redux配置      199
9.3.1  前期配置   199
9.3.2  路由功能的测试       201
9.4  业务入口      202
9.5  首页      203
9.5.1  头部   204
9.5.2  列表内容   205
9.6  详情页   224
9.6.1  静态页面开发   224
9.6.2  根据id获取详情      227
9.6.3  渲染内容   228
9.7  个人中心      230
9.7.1  分析页面功能   231
9.7.2  模拟用户登录和登出       232
9.8  实战项目回顾      234
……

媒体评论

近几年前端应用框架发展迅猛，React从中脱颖而出，成为了*受开发者欢迎的技术栈之一。本书中的每个章节都以实战演练的方式展开讲解，让读者在理解理论知识的基础上再加以实践，这对于想要学习React技术栈的朋友们来说，是很不错的选择。

——阿里巴巴钉钉前端技术专家 核心

React 配合 Redux 具有更加强大的数据管理能力。对于前端开发者而言，这相当于多了一把“利剑”。本书由浅入深、全面细致地介绍了React和Redux前端开发的相关知识，并对其周边开发生态做了介绍。相信读者通过阅读本书可以很好地掌握这些知识，提高前端开发水平。

——宋小菜Scott

React.js是当前*火爆的前端技术栈之一，是一个专注于View层的前端技术栈。由于其独特的设计思想和出众的性能，已经被越来越多的开发者所关注。本书可以带领读者由浅入深、全面系统地学习React.js及Redux生态，迈出作为React全栈开发者的*步。

——贝贝集团大前端架构负责人 Early

前沿

随着智能手机和移动互联网的普及，前端技术栈从jQuery到Backbone和Knockout，再到Angular、React和Vue，各大框架此起彼伏。如今，前端开发越来越庞大的应用规模和越来越复杂的交互效果远不是早期前端开发者们所能想象的。基于原生JavaScript来构建这些应用显得异常复杂且难以维护。但拥有创造力的开发者们并没有停下脚步，而是不断地寻求新的解决方案。其中，React逐渐成为各种方案中最耀眼的一门技术，它是众多开发者的智慧结晶。

React诞生于Facebook，开源之后立即在前端领域掀起了一股巨浪，得到了众多开发者的青睐。随后，React社区也是蓬勃发展，出现了大量优秀的前端开发工具，为开发者提供了一种不一样的开发体验，也为大家指明了一条充满想象的道路。

《海贼王》中罗杰说，每个人都有自己出场的机会！未来，也许React会在前端的历史浪潮中被人们遗忘，但如今React的设计思想却影响了无数的开发者，当下正是属于它的时代。

本书编写目的

首先，要明确一点，本书的内容是作者的个人见解，而非官方的枯燥文档。本书是作者从事前端开发以来对React进行研究和思考后的产物，有些内容是经过作者个人的认知和情感润饰而来，不一定具有权威性，但希望能通过本书带领读者进入React的世界。如若本书能让读者对前端开发有所启迪和思考，那么笔者的写作目的也就达到了。

其次，也希望读者认识到，React的设计思想给前端开发带来了非常积极的作用和很大的影响。因此，希望读者能通过阅读本书辩证地看待和思考各类前端组件与框架工具，并提升自己的认知，开阔自己的眼界，这是写作本书的另一个目的。

本书有何特色

1．提供翔实的代码及解读

为了便于读者理解本书内容，提高学习效率，书中的所有实例和项目案例都提供了翔实的源代码，并对源代码做了详细的解读。读者可以通过本书提供的下载地址获取。

2．不仅仅是React.js

本书虽然定位为React的入门与实践读物，但是其内容远远不只是React.js，书中还介绍了当前前端开发所使用的一整套主流技术栈，如ES 6、Webpack、单元测试和Node.js等。

3．有广度，也有深度

从前端到服务器端，从各类知识点的通俗讲解到相关知识点的深入解读，本书不仅有广度，而且还有深度，能够让读者彻底了解React Redux知识点的前世今生。

本书内容概要

第1章从学习React需要准备的知识和基本概念开始入手，依次介绍了Node.js、NPM、Webpack、ES 6语法、React核心特性和JSX语法等内容。

第2章介绍了React组件的相关知识，不仅可以让读者理解组件化开发的概念，还能动手实践各种React中的组件，并掌握组件之间的通信。

第3章介绍了React的事件、表单和样式等相关知识点，让读者了解如何通过React创建丰富的用户体验。

第4章介绍了React Redux的数据流管理。虽然本章的主题是介绍React生态中的数据管理工具Redux，但为了让读者了解React Redux的项目原理，还剖析了目前比较常用的MVC和MVVM等开发模式的架构思想和设计模式理念。

第5章介绍了React的路由功能，帮助读者了解客户端路由的原理，进而使用React中的路由工具react-router实现前端路由。

第6章介绍了React性能及性能优化的相关知识。首先分析了神秘的diff算法，然后介绍了组件渲染和数据结构的底层技术，最后带领读者学习如何开发高性能的React应用。

第7章主要介绍了React服务端渲染（SSR）的相关技术。首先介绍了服务端渲染和客户端渲染的区别，然后介绍了React中服务端渲染的方法，最后通过实例演示了服务端渲染的流程。

第8章介绍了单元测试及单元测试对前端的重要性，并结合React实战项目案例，让读者了解如何使用各种工具实现自动化测试。

第9章通过一个移动端社区项目案例，对React、Redux、react-router和Webpack等内容进行总结，并带领读者动手开发实践。

本书配套源代码获取方式

本书所有实战项目案例的源代码文件都存放在GitHub上，其他可运行的小案例源代码文件都存放在JSFiddle上（有搭建好的环境），读者可以自行下载。

另外，读者还可以在华章公司的网站（www.hzbook.com）上搜索到本书，然后通过页面上的“配书资源”下载链接获取源代码文件。

源代码可能会和本书内容有所出入，因为作者会根据技术变化对代码进行小幅改动，读者可以结合相关章节查看。

本书为谁而写

如果您熟悉JavaScript，打算开发跨平台应用程序，且想选择React技术栈，那么本书就是为您而准备的。本书读者对象如下：

? 学习大前端开发的入门与提高人员；

? React开发程序员；

? 跨平台开发前端人员；

? React全栈开发人员；

? 相关院校的学生；

? 培训机构的学员。

致谢

本书的编写耗费了作者周末和晚上的大量时间。感谢家人李胜男的陪伴和谅解！也感谢在写作本书的过程中给予笔者宝贵建议的同事艾渤添！最后由衷地感谢出版社的编辑人员，是他们认真负责的工作态度，以及给予笔者的耐心指导，才让本书内容更加精彩！

读者在阅读本书的过程中若有问题，可以发送电子邮件以获取帮助。

作者

免费在线读

1.1.4 第一个Webpack构建实战
本节将构建一个很简单的项目，重点是让读者先了解Webpack。新建项目app（一个空目录），并以此为根目录。
使用Webpack构建项目示例：
（1）在根目录下新建文件index.html，内容如下：

!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
title document /title
/head
body
script type="text/javascript" src="bundle.js" charset="utf-8" /script
/body
/html

（2）新建文件a.js，内容如下：

1.1.4 第一个Webpack构建实战

本节将构建一个很简单的项目，重点是让读者先了解Webpack。新建项目app（一个空目录），并以此为根目录。

使用Webpack构建项目示例：

（1）在根目录下新建文件index.html，内容如下：

document

（2）新建文件a.js，内容如下：

document.write("It works from a.js");

此时目录结构为：

├── a.js

└── index.html

（3）在根目录下执行如下命令（Webpack 4以上版本）：

webpack a.js -o bundle.js

?提示：如果是Webpack 4以下版本，则不需要-o参数，但需要webpack.config.js配置文件。

Webpack会根据模块的依赖关系进行静态分析，模块a.js被打包为bundle.js。终端效果如图1.3所示，同时根目录下会生成一个新的文件./bundle.js。

图1.3 Webpack编译文件

?提示：如果Webpack构建不成功，第一，查看源码中是否有特殊字符；第二，查看Webpack版本号。Webpack4版本开始的构建命令略有不同。

1.1.5 Webpack loader实战

使用Webpack loader构建项目示例：

在前面示例基础上对文本样式进行修改，在根目录下安装loader，命令如下：

npm install css-loader style-loader –D

（1）新建文件./webpack.config.js，代码如下，其中的rules用来配置loader。

module.exports = {

entry: "./a.js",

output: {

path: __dirname,

filename: "bundle.js"

mode: "production",

module: {

rules: [

{ test: /.css$/, loader: "style-loader!css-loader" }

]

}

};

（2）新建./style.css样式文件，代码如下：

body {

color: red;

}

（3）在a.js中引入样式文件：

import "./style.css";

此时项目结构如下：

├── a.js

├── index.html

├── package.json

├── style.css

└── webpack.config.js

（4）在终端执行Webpack命令：

webpack

Webpack会默认找到webpack.config.js配置文件，直接执行里面的命令，显示结果如图1.4所示。

图1.4 Webpack编译之loader

（5）根目录下会再次生成bundle.js文件。打开浏览器后，黑色英文Hello World！的颜色将变为红色。

实际项目中，一般不会直接执行Webpack命令，而是在package.json中的scripts内配置：

"scripts": {

"a" :"webpack --config ./webpack.config.js"

其中，参数--config用于指定读取哪个配置文件。如果没有指定--config，Webpack会默认读取webpack.config.js或webpackfile.js文件。项目中通常会配置两三个Webpack配置文件，命名时一般会带上环境，如webpack.config.base.js，webpack.config.dev.js和webpack.config.prod.js。

然后在终端执行：

npm run a

?提示：如果默认安装的package.json文件名为package-lock.json，别忘记修改过来。

1.1.6 Webpack配置详解

前面已经使用过webpack.config.js中的一些配置，本节将详细介绍Webpack的主要配置项。

（1）模式mode：

mode: "production", // 生产模式

mode: "development", // 开发模式

（2）入口entry：

entry: "./app/entry", // 入口可以是字符串、对象或数组

entry: ["./app/entry1", "./app/entry2"],

entry: {

a: "./app/entry-a",

b: ["./app/entry-b1", "./app/entry-b2"]

（3）出口output：

output: { // Webpack如何输出结果的相关选项

path: path.resolve(__dirname, "dist"), // 字符串

// 所有输出文件的目标路径

// 必须是绝对路径（使用Node.js的path模块）

filename: "bundle.js", // 字符串

filename: "[name].js", // 用于多个入口点（entry point）

filename: "[chunkhash].js", // 用于长效缓存

// 「入口分块(entry chunk)」的文件名模板

publicPath: "/assets/", // 字符串

publicPath: "",

publicPath: "https://cdn.example.com/",

// 输出解析文件的目录，URL相当于HTML页面

library: "MyLibrary", // string,

// 导出库(exported library)的名称

libraryTarget: "umd", // 通用模块定义

libraryTarget: "commonjs2", // 作为exports的属性导出

libraryTarget: "commonjs", // 作为exports的属性导出

libraryTarget: "amd", // 使用amd定义方法来定义

libraryTarget: "this", // 在this上设置属性

libraryTarget: "var", // 变量定义于根作用域下

libraryTarget: "assign", // 盲分配（blind assignment）

libraryTarget: "window", // 在window对象上设置属性

libraryTarget: "global", // 设置global 对象

libraryTarget: "jsonp", // jsonp wrapper

// 导出库(exported library)的类型

/* 高级输出配置（点击显示） */ pathinfo: true, // boolean

// 以文件形式异步加载模块配置项

chunkFilename: "[id].js",

chunkFilename: "[chunkhash].js", // 长效缓存（/guides/caching）

// 「附加分块(additional chunk)」的文件名模板

jsonpFunction: "myWebpackJsonp", // string

// 用于加载分块的 JSONP 函数名

sourceMapFilename: "[file].map", // string

sourceMapFilename: "sourcemaps/[file].map", // string

// 「source map 位置」的文件名模板

devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string

// 「devtool 中模块」的文件名模板

devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?

[hash]", // string

// 「devtool 中模块」的文件名模板（用于冲突）

umdNamedDefine: true, // boolean

// 在 UMD 库中使用命名的 AMD 模块

crossOriginLoading: "use-credentials", // 枚举

crossOriginLoading: "anonymous",

crossOriginLoading: false,

// 指定运行时如何发出跨域请求问题

/* 专家级输出配置（自行承担风险） */

}

（4）module模块处理：

module: {

// 关于模块配置

rules: [

// 模块规则（配置 loader、解析器等选项）

{

test: /.jsx?$/,

include: [

path.resolve(__dirname, "app")

exclude: [

path.resolve(__dirname, "app/demo-files")

// 这里是匹配条件，每个选项都接收一个正则表达式或字符串

// test和include具有相同的作用，都是必须匹配选项

// exclude 是必不匹配选项（优先于test和include）

// 最佳实践：

// - 只在test和文件名匹配中使用正则表达式

// - 在include和exclude中使用绝对路径数组

// - 尽量避免使用exclude，更倾向于使用include

issuer: { test, include, exclude },

// issuer 条件（导入源）

enforce: "pre",

enforce: "post",

// 标识应用这些规则，即使规则覆盖（高级选项）

loader: "babel-loader",

// 应该应用的 loader，它相对上下文解析

// 为了更清晰，-loader 后缀在Webpack 2中不再是可选的

options: {

presets: ["es2015"]

// loader的可选项

{

test: /.html$/,

use: [

// 应用多个loader和选项

"htmllint-loader",

{

loader: "html-loader",

options: {

/* ... */

}

]

{ oneOf: [ /* rules */ ] },

// 只使用这些嵌套规则之一

{ rules: [ /* rules */ ] },

// 使用所有嵌套规则（合并可用条件）

{ resource: { and: [ /* 条件 */ ] } },

// 仅当所有条件都匹配时才匹配

{ resource: { or: [ /* 条件 */ ] } },

{ resource: [ /* 条件 */ ] },

// 任意条件匹配时匹配（默认为数组）

{ resource: { not: /* 条件 */ } }

// 条件不匹配时匹配

/* 高级模块配置（点击展示） */

noParse: [

/special-library.js$/

// 不解析这里的模块

unknownContextRequest: ".",

unknownContextRecursive: true,

unknownContextRegExp: /^./.*$/,

unknownContextCritical: true,

exprContextRequest: ".",

exprContextRegExp: /^./.*$/,

exprContextRecursive: true,

exprContextCritical: true,

wrappedContextRegExp: /.*/,

wrappedContextRecursive: true,

wrappedContextCritical: false,

// specifies default behavior for dynamic requests

（5）resolve解析：

resolve: {

// 解析模块请求的选项（不适用于对 loader 解析）

modules: [

"node_modules",

path.resolve(__dirname, "app")

// 用于查找模块的目录

extensions: [".js", ".json", ".jsx", ".css"],

// 使用的扩展名

alias: {

// 模块别名列表

"module": "new-module",

// 起别名："module" -> "new-module" 和 "module/path/file" -> "new-

module/path/file"

"only-module$": "new-module"

// 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/

file" -> "new-module/path/file"

"module": path.resolve(__dirname, "app/third/module.js"),

// 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误

// 模块别名相对于当前上下文导入

/* 可供选择的别名语法（点击展示） */

alias: [

{

name: "module",

// 旧的请求

alias: "new-module",

// 新的请求

onlyModule: true

// 如果为true，那么只有module是别名

// 如果为false，则"module/inner/path" 也是别名

}

/* 高级解析选项（点击展示） */ symlinks: true,

// 遵循符号链接（symlinks）到新位置

descriptionFiles: ["package.json"],

// 从 package 描述中读取的文件

mainFields: ["main"],

// 从描述文件中读取的属性

// 当请求文件夹时

aliasFields: ["browser"],

// 从描述文件中读取的属性

// 以对此 package 的请求起别名

enforceExtension: false,

// 如果为 true，请求必不包括扩展名

// 如果为 false，请求可以包括扩展名

moduleExtensions: ["-module"],

enforceModuleExtension: false,

// 类似 extensions/enforceExtension，但是用模块名替换文件

unsafeCache: true,

unsafeCache: {},

// 为解析的请求启用缓存

// 这是不安全的，因为文件夹结构可能会改动

// 但是性能改善是很大的

cachePredicate: (path, request) => true,

// predicate function which selects requests for caching

plugins: [

...

]

// 应用于解析器的附加插件

（6）performance打包后命令行如何展示性能提示，如果超过某个大小时是警告还是报错：

performance: {

hints: "warning", // 枚举 hints: "error", // 性能提示中抛出错误

hints: false, // 关闭性能提示

maxAssetSize: 200000, // 整数类型（以字节为单位）

maxEntrypointSize: 400000, // 整数类型（以字节为单位）

assetFilter: function(assetFilename) {

// 提供资源文件名的断言函数

return assetFilename.endsWith(.css) || assetFilename.endsWith(.js);

}

（7）devtool用于配置调试代码的方式，打包后的代码和原始代码存在较大的差异，此选项控制是否生成，以及如何生成sourcemap：

devtool: "source-map", // enum devtool: "inline-source-map",

// 嵌入到源文件中

devtool: "eval-source-map", // 将sourcemap嵌入到每个模块中

devtool: "hidden-source-map", // sourcemap 不在源文件中引用

devtool: "cheap-source-map", // 没有模块映射（module mappings）的

sourcemap低级变体(cheap-variant)

devtool: "cheap-module-source-map", // 有模块映射（module mappings）的

sourcemap低级变体

devtool: "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快

// 通过在浏览器调试工具（browser devtools）中添加元信息（meta info）增强调试

// 牺牲了构建速度的sourcemap是最详细的

（8）context基础目录，绝对路径，用于从配置中解析入口起点（entry point）和loader：

context: __dirname, // string（绝对路径！）

（9）target构建目标：

target: "web", // 枚举 target: "webworker", // WebWorker

target: "webworker" //webworker

target: "node", // Node.js 通过require加载模块

target: "async-node", // Node.js 通过fs和vm加载分块

target: "node-webkit", // 编译为webkit可用，并且用jsonp去加载分块

target: "electron-main", // electron，主进程（main process）

target: "electron-renderer", // electron，渲染进程（renderer process）

target: (compiler) => { /* ... */ }, // 自定义

（10）externals外部拓展：

externals: ["react", /^@angular//], externals: "react", // string（精

确匹配）

externals: /^[a-z-] ($|/)/, // 正则

externals: { // 对象

angular: "this angular", // this["angular"]

react: { // 使用UMD规范

commonjs: "react",

commonjs2: "react",

amd: "react",

root: "React"

}

externals: (request) => { /* ... */ return "commonjs " request }

（11）stats统计信息：

stats: "errors-only",

stats: { //object

assets: true,

colors: true,

errors: true,

errorDetails: true,

hash: true,

...

（12）devServer配置本地运行环境：

devServer: {

proxy: { // 服务器代理

/api: http://localhost:3000

contentBase: path.join(__dirname, public), // boolean、string或array,

服务器资源根目录

compress: true, // 启用gzip压缩

historyApiFallback: true, // 返回404页面时定向到特定页面

...

（13）plugins插件：

plugins: [

...

（14）其他插件：

// 附加插件列表

/* 高级配置（点击展示） */

resolveLoader: { /* 等同于 resolve */ }

// 独立解析选项的 loader

parallelism: 1, // number

// 限制并行处理模块的数量

profile: true, // boolean数据类型

// 捕获时机信息

bail: true, //boolean

// 在第一个错误出错时抛出，而不是无视错误

cache: false, // boolean

// 禁用/启用缓存

watch: true, // boolean

// 启用观察

watchOptions: {

aggregateTimeout: 1000, // in ms毫秒单位

// 将多个更改聚合到单个重构建（rebuild）

poll: true,

poll: 500, // 间隔单位ms

// 启用轮询观察模式

// 必须用在不通知更改的文件系统中

// 即 nfs shares（Network FileSystem）

node: {

// Polyfills和mocks可以在非Node环境中运行Node.js环境代码

// environment code in non-Node environments.

console: false, // boolean | "mock"布尔值或"mock"

global: true, // boolean | "mock"布尔值或"mock"

process: true, // boolean布尔值

__filename: "mock", // boolean | "mock"布尔值或"mock"

__dirname: "mock", // boolean | "mock"布尔值或"mock"

Buffer: true, // boolean | "mock"布尔值或"mock"

setImmediate: true // boolean | "mock" | "empty"布尔值或"mock"或"empty"

recordsPath: path.resolve(__dirname, "build/records.json"),

recordsInputPath: path.resolve(__dirname, "build/records.json"),

recordsOutputPath: path.resolve(__dirname, "build/records.json"),

// TODO

}

更多详情可请访问Webpack官方网站https://webpack.js.org/。当然读者也可以直接使用Facebook官方提供的create-react-app进行搭建（https://github.com/facebook/create- react-app）。后面章节会继续介绍Webpack真实项目的搭建与实践开发。

本节将构建一个很简单的项目，重点是让读者先了解Webpack。新建项目app（一个空目录），并以此为根目录。