Webpack Module Resolution学习

Module Resolution

文档地址
通过指定绝对路径来处理librariy以来。module可以作为以来从另外一个module引入。

import foo from 'path/to/module'
// or
require('path/to/module')

依赖module可以来自业务代码或者第三方的library。
resolver帮助webpack查找每个通过require/import导入的代码块,并将这些依赖打包到bundle中。
webpack在构建modules时使用enhanced-resolve来解决文件路径的问题。

Resolving rules in webpoack

基于enhanced-resolve。webpack可以支持三种类型的文件路径

  • Absolute path
import "/home/me/file";

import "C:\\Users\\me\\file";

使用绝对路径,则不需要再设置其他的规则

  • Relative path
import "../src/file1";
import "./file2";

使用相对路径,使用import or require引入的依赖会基于运行环境的文件夹。
最终引入文件的路径,基于引入文件路径时的运行环境而定,将运行环境的路径同相对路径进行拼接,生成绝对路径。

  • Module path
import "module";
import "module/lib/file";

通过查找resolve.modules中配置的文件夹来查找依赖的module。
可以通过resolve.alias配置,使用alias替换原来module路径。
当基于上述规则解决了依赖,resolver会检测制定的路径是一个文件,还是一个文件夹。

如果是指向一个文件:

  • 如果path有文件扩展名,则文件会被直接绑定使用。
  • 如果path没有文件扩展名,则查找的文件后缀会通过resolve.extensions配置来决定。
    resolve.extensions会让resolver使用某个扩展名(eg: .js ,.jsx)来解决依赖。

如果指向的是文件夹:
resolver会通过如下的步骤找到正确的文件

  • 如果文件夹中包含package.json。则会按照顺序从resolve.mainFields配置的文件中进行查找,
    package.json中第一个定义的文件路径会作为查找结果。
  • 如果没有package.json或者resolve.mainFields返回的路径不可用,
    则会按照resolve.mainFields中定义的文件名在imported/required文件夹中按顺序进行查找。
  • 文件后缀会通过使用resolve.extensions配置来进行查找。
    webpack会按照构建对象使用合理的配置来解决以来。
    默认配置

Resolving Loaders

loader以来的查找规则同文件查找规则一样,但是resolveLoader可以单独为loader进行配置。

Caching

文件系统都是又缓存的,所以五罗并发或连续请求相同文件速度都会很快。
watch mode下,只有修改过的文件才会从缓存中被一处,如果未开启watch模式,则缓存只会在重新编译时被更新。
查看Resolve API来了解上述配置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,761评论 0 1
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,243评论 0 21
  • publicPath指定了一个在浏览器中被引用的URL地址。 对于使用 和 加载器,当文件路径不同于他们的本地磁盘...
    飞呀飞哥阅读 1,725评论 0 0