React学习手册

96

｜

第

5

章

代码拆分

将代码拆分成不同的片段，使得用户可以按需加载它们。有时这种操作也被称为

汇总（

rollup

）或分层，其目标是为不同页面或者设备的需要对代码进行拆分打

包。

代码压缩

删除代码中的空格，换行符，冗长的变量名，以及不必要的代码，来达到减小文

件尺寸的目的。

特性标记

将代码发送到一个或者多个系统，测试代码的兼容性。

热替换（

HMR

）

监控源代码的变更，实时更新发生变更的模块。

webpack

加载器

加载器是一个函数，它主要的作用是帮助用户在构建过程中处理代码转换的问题。如

果我们的应用程序采用了

ES6

规范，

JSX

、

CoffeeScript

，以及其他不能被浏览器自动

解析的语言，那么我们将在文件

webpack.config.js

中声明必要的加载器来完成代码的

语法转换工作，从而达到让代码可以被浏览器自动解析的目的。

webpack

包含大量的加载器，并且可以分为几类。最常用的加载器是将某个语言的

一种方言转换成另外一种。比如

ES6

规范和

React

代码是通过其内置的加载器

babel-

loader

进行转译的。我们声明

Babel

将要处理的文件类型，然后其他工作就交给

webpack

完成即可。

另外一种比较常用的加载器是和样式表有关的。

css-loader

会查找扩展名为

.

scss

的

文件，然后将它们转译成

CSS

。

css-loader

还可以用来在用户的

bundle

中引用

CSS

模

块。所有的

CSS

代码将会打包成

JavaScript

，当打包文件中引用了

JavaScript

文件时，

系统会自动添加

CSS

代码。这样就不需要使用 ...