目录
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 ,下图为实验结果。
评论列表
评论内容: