目录

1. 手撕webpack：初体验

2. 手撕webpack：配置文件的使用

resolve 的使用

resolve 选项能设置模块如何被解析，主要用来配置打包时如何查找模块，本篇主要介绍常用的 alias 、extensions 配置项。

将上一篇的项目结构稍作修改，src 目录下新增 common 文件夹，该文件夹下存放一些通用的 JavaScript 函数库。utils.js 文件中定义了一个 isEmpty 函数，该函数判断传入的字符串是否为空，在文件的末尾将函数导出为一个 ES6 的模块。

alias 别名

alias 用来创建 import 或 require 的别名，来确保模块引入变得更简单，其实就是定义一个名称来简短模块文件的导入路径。例如，要在 index.js 中使用 utils.js 中的 isEmpty 函数，模块导入方式为：

import {isEmpty} from 'src/common/utils.js'

let name = '暗夜余晖'

let result  = isEmpty(name)

console.log('是否为空：' + result)

如果在 webpack.config.js 中配置了 alias ，则导入的文件路径将变的更加简短。

如上图，webpack.config.js 中配置别名 @common 的路径为 src/common，这样在 import 导入模块时可以使用 @common 缩短路径。

webpack 原生支持 ES6 的模块系统，所以不需要使用 Babel 转换。

extensions 扩展

extensions 设置加载模块时自动解析的扩展，同时也能够使用户在引入模块时不带扩展。

如上图，配置 extensions 自动解析扩展 ".js"，在导入模块的时候可以只写文件名而忽略扩展。

扩展名的解析顺序是依据数组的顺序进行的，比如 extensions 配置了 ['.jst', '.js']，则优先寻找 utils.jst ，如果存在就导入否则继续查找 utils.js ，下图为实验结果。