夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
手撕webpack:解析(resolve) 的使用

目录

  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 ,下图为实验结果。

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2020-4-22  拜读(182)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付