美文网首页
Webpack Module Resolution学习

Webpack Module Resolution学习

作者: yftx_ | 来源:发表于2017-03-03 17:04 被阅读244次

    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来了解上述配置。

    相关文章

      网友评论

          本文标题:Webpack Module Resolution学习

          本文链接:https://www.haomeiwen.com/subject/adjrgttx.html