webpack-Module Resolution(模块解析)
模块解析(Module Resolution)
resolver 是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用,如下:
import foo from 'path/to/module'
// 或者
require('path/to/module')
所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver 帮助 webpack 找到 bundle 中需要引入的模块代码,这些代码在包含在每个 require
/import
语句中。 当打包模块时,webpack
使用 enhanced-resolve 来解析文件路径
webpack 中的解析规则
使用 enhanced-resolve
,webpack 能够解析三种文件路径:
绝对路径
import "/home/me/file"; import "C:\\Users\\me\\file";
由于我们已经取得文件的绝对路径,因此不需要进一步再做解析。
相对路径
import "../src/file1";
import "./file2";
在这种情况下,使用 import
或 require
的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require
中给定的相对路径,会添加此上下文路径(context path),以产生模块的绝对路径(absolute path)。
模块路径
import "module";
import "module/lib/file";
模块将在 resolve.modules
中指定的所有目录内搜索。
你可以替换初始模块路径,此替换路径通过使用 resolve.alias
配置选项来创建一个别名。
一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向文件或目录。如果路径指向一个文件:
- 如果路径具有文件扩展名,则被直接将文件打包。
- 否则,将使用 [
resolve.extensions
] 选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如.js
,.jsx
)。
如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件:
- 如果文件夹中包含
package.json
文件,则按照顺序查找resolve.mainFields
配置选项中指定的字段。并且package.json
中的第一个这样的字段确定文件路径。 - 如果
package.json
文件不存在或者package.json
文件中的 main 字段没有返回一个有效路径,则按照顺序查找resolve.mainFiles
配置选项中指定的文件名,看是否能在 import/require 目录下匹配到一个存在的文件名。 - 文件扩展名通过
resolve.extensions
选项采用类似的方法进行解析。
webpack 根据构建目标(build target)为这些选项提供了合理的默认配置。
解析 Loader(Resolving Loaders)
Loader 解析遵循与文件解析器指定的规则相同的规则。
但是 resolveLoader
配置选项可以用来为 Loader 提供独立的解析规则。
缓存
每个文件系统访问都被缓存,以便更快触发对同一文件的多个并行或串行请求。
在观察模式下,只有修改过的文件会从缓存中摘出。
如果关闭观察模式,在每次编译前清理缓存。
有关上述配置的更多信息,请查看解析 API学习。
webpack-Module Resolution(模块解析)的更多相关文章
- webpack模块解析
前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...
- webpack学习_模块热替换(Hot Module Peaplacement)
模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...
- webpack学习之——模块(Modules)
在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块. 每个模块具有比完整程序更小的接触面,使得校验.调试.测试轻而易举. 精 ...
- webpack 支持的模块方法
在webpack中支持的模块语法风格有:ES6,commonJS和AMD ES6风格(推荐) 在webpack2中,webpack支持ES6模块语法.这意味着在没有babel等工具处理的情况下你就可以 ...
- saltstack主机管理项目:动态调用插件解析-模块解析(五)
一.动态调用插件解析 1.目录结构 1.base_module代码解析: def syntax_parser(self,section_name,mod_name,mod_data): print(& ...
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
- Webpack - CommonJs & AMD 模块打包器
Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...
- TypeScript 素描 - 模块解析、声明合并
模块解析 模块解析有两种方式 相对方式 也就是以/或 ./或-/开头的,比如import jq from "/jq" 非相对方式 比如 import model from ...
- python-pcap模块解析mac地址
python-pcap模块解析mac地址 作者:vpoet mail:vpoet_sir@163.com import pcap import binascii a = pcap.pcap() a.s ...
随机推荐
- largest rectangle in histogram leetcode
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
- mybatis 实现批量更新
更新单条记录 1 UPDATE course SET name = 'course1' WHERE id = 'id1'; 更新多条记录的同一个字段为同一个值 1 UPDATE course SET ...
- 字符串KMP || POJ 2185 Milking Grid
求一个最小矩阵,经过复制能够覆盖原矩阵(覆盖,不是填充,复制之后可以有多的) *解法:横着竖着kmp,求最大公倍数的做法是不对的,见http://blog.sina.com.cn/s/blog_69c ...
- node.js从入门到放弃(一)
以下内容全是我个人理解写出,如有不对,请立刻练习本人进行更改.以免被刚入门的被我带入坑里. —node是什么?我想大家应该都知道. node是前端未来干掉后端的一种语言,是用JavaScript来编写 ...
- Gameia
F - Gameia HDU - 6105 Alice and Bob are playing a game called 'Gameia ? Gameia !'. The game goes l ...
- tomcat创建用户
进入manager App时需要用户名+密码 输入错误时会出现页面如下: 根据提示去服务器中找到tomcat目录下的tomcat-user.xml文件 在指定位置添加语句 <user use ...
- tornado框架基础01-路由简介
tornado 小而精 Django 大而全 Web框架 Tornado是一个由Python开发的Web框架 Web服务 利用Tornado,可以快速搭建和一个高性能的Web服务 非阻塞 Tornad ...
- 杭电 5326 Work (并查集求子结点为k的结点数)
Description It’s an interesting experience to move from ICPC to work, end my college life and start ...
- 【HDU 6005】Pandaland(Dijkstra)
Problem Description Mr. Panda lives in Pandaland. There are many cities in Pandaland. Each city can ...
- 在ubuntu18.04版本安装vscode
方式一:图形安装 1. 在ubuntu桌面找到应用中心 2. 在软件中心中,搜索Visual Studio Code 3. 在页面中就可以直接选择安装 方式二:命令安装 1. 从vscode官网下载最 ...