4.1.4 优化 resolve.alias 配置

4.1.4 优化 resolve.alias 配置
问题一：优化 resolve.alias 配置？

resolve.alias配置项通过别名来把原导入路径映射成一个新的导入路径。

举例说明

在实战项目中经常会依赖一些庞大的第三方模块，以 React 库为例，安装到node_modules目录下的 React 库的目录结构如下：

├── dist
│ ├── react.js
│ └── react.min.js
├── lib
│ ... 还有几十个文件被忽略
│ ├── LinkedStateMixin.js
│ ├── createClass.js
│ └── React.js
├── package.json
└── react.js

可以看到发布出去的 React 库中包含两套代码：

一套是采用 CommonJS 规范的模块化代码，这些文件都放在lib目录下，以package.json中指定的入口文件react.js为模块的入口。
一套是把 React 所有相关的代码打包好的完整代码放到一个单独的文件中，这些代码没有采用模块化可以直接执行。其中dist/react.js是用于开发环境，里面包含检查和警告的代码。dist/react.min.js是用于线上环境，被最小化了。
默认情况下 Webpack 会从入口文件./node_modules/react/react.js开始递归的解析和处理依赖的几十个文件，这会时一个耗时的操作。 通过配置resolve.alias可以让 Webpack 在处理 React 库时，直接使用单独完整的react.min.js文件，从而跳过耗时的递归解析操作。

相关 Webpack 配置如下：

module.exports = {
resolve: {
// 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件，
// 减少耗时的递归解析操作
alias: {
'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'), // react15
// 'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'), // react16
}
},
};

除了 React 库外，大多数库发布到 Npm 仓库中时都会包含打包好的完整文件，对于这些库你也可以对它们配置 alias。