webpack如何查找模块依赖

dmlllll 发布于2019-08-23 18:39 / 1049人阅读

摘要：此时会首先检查参数目标是否为目录，如果是目录，则检查的字段。会在配置文件中的所有查找目录中查找。对于复杂的模块路径，还可以设置别名。带表达式的语句如果含有表达式，会创建一个上下文，因为在编译时并不清楚具体是哪一个模块被导入。

【01】Webpack的文件加载分为三种：

绝对路径

比如require("/home/me/file")。
此时会首先检查参数目标是否为目录，如果是目录，则检查package.json的main字段。

如果没有package.json或者没有main字段，则会用index作为文件名。

经过上述过程，解析到一个绝对路径的文件名，然后会尝试为其加上扩展名（扩展名可在webpack.config.js中设置），第一个存在的文件作为最终的结果。

相对路径

比如require("./file")。使用当前路径或配置文件中的context作为相对路径的目录。加载过程和绝对路径相似。

模块路径

如require("module/lib/file")。会在配置文件中的所有查找目录中查找。

对于复杂的模块路径，还可以设置别名(resolve.alias)。

一个路径解析配置的例子：

resolve.extensions
用于指明程序自动补全识别哪些后缀。第一个是空字符串，对应不需要后缀的情况。

module.exports = {
    resolve: {
        root: [appRoot, nodeRoot, bowerRoot],
        modulesDirectories: [appModuleRoot], 
        alias: {
            "angular": "angular/angular",
            "lodash": "lodash/dist/lodash"
        },
        extensions: ["", ".js", ".coffee", ".html", ".css", ".scss"]
    }
}

Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, "app/folder") 或path.join(__dirname, "app", "folder") 的方式来配置，以兼容 Windows 环境。

带表达式的 require 语句

如果request 含有表达式(expressions)，会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入。
示例：
require("./template/" + name + ".ejs");
webpack 解析 require() 的调用，提取出来如下这些信息：
Directory: ./template
Regular expression: /^.*.ejs$/

GPU云服务器云服务器依赖模块模块依赖 linux模块依赖 php如何查找顶级

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105630.html

什么是 Webpack？【Webpack Book 翻译】

摘要：资源哈希编码使用可以为每个包的名称注入一个哈希值例如，，以便在版本更新后使客户端上旧版本的包无效重新下载。如此受人喜爱的原因之一是热模块更换。可以为文件名生成哈希值，在内容更改时，可以作废浏览器缓存中上个版本的包。原文链接：https://survivejs.com/webpack...翻译计划：https://segmentfault.com/a/11... 涉及到的未翻译单词 ...

tainzhi 2019-08-23 10:59 评论0 收藏0
理解webpack原理，手写一个100行的webpack

摘要：什么是可以引用官网的一幅图解释，我们可以看到，可以分析各个模块的依赖关系，最终打包成我们常见的静态文件，。我们暂时把通过传文件路径能返回文件信息的这个函数叫。什么是webpack 可以引用官网的一幅图解释，我们可以看到webpack，可以分析各个模块的依赖关系，最终打包成我们常见的静态文件，.js 、 .css 、 .jpg 、.png。今天我们先不弄那么复杂，我们就介绍webpac...

王伟廷 2019-08-23 15:38 评论0 收藏0
借助webpack对项目进行分析优化

摘要：由于项目的不断扩大，只会影响我们定位功能和问题的速度，因此对冗余文件进行清理，是很重要的。我们在项目中使用的，自动将各个图标进行。进入公司之后，接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档，但是由于项目过于庞大，老旧。包含了打包过慢，冗余文件过多等诸多问题。想要快速的解决这些问题，想要完全把功能重构一遍的话，成本太高了。一个一个文件来过，时间成本也比较大。...

Me_Kun 2019-08-22 16:17 评论0 收藏0
如何提升VS Code扩展的启动速度——不只是Webpack

摘要：同时它又需要监听事件，当物联网设备插入计算机后做出响应。比如以热启动打开物联网项目工作区的启动时间在表中是毫秒，但是正在运行的扩展页面中大约是毫秒。当在中应用懒加载时，无论是否使用打包模块，没有工作区时启动速度都远快于打开物联网工作区。概述扩展可以让用户在VS Code中向开发工作流程添加新的语言、调试器和工具。VS Code提供了丰富的可扩展模块，允许扩展访问用户界面、提供扩展功...

xiaolinbang 2019-08-26 13:47 评论0 收藏0
webpack 使用指南-绪论

摘要：在讲解之前先回顾一下笔者在项目开发中的工作流变化时代此时工作流大致为结合插件处理视图处理样式等库此时由于依赖少手动引入各种标签结合调试界面时代利用指令服务控制器将逻辑拆分为多个文件利用编译会将分为全局样式和组件样式下载各种依赖此时任需要手动在讲解 webpack 之前先回顾一下笔者在项目开发中的工作流变化. jquery 时代此时工作流大致为 jquery 结合插件处理视图 bo...

Nosee 2019-08-21 17:38 评论0 收藏0