webpack如何查找模块依赖

2019-07-13 admin

【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$/

[转载]原文链接:https://segmentfault.com/a/1190000019751035

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69644.html

文章标题:webpack如何查找模块依赖

相关文章
如何使用JavaScript
一、应用<script>标签加入JavaScript 任何脚本语言均可以通过<script>…</script>标记对加入到HTML代码中(即是加入到网页文档<html>…</html&...
2015-11-12
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
如何优雅的使用vue+Dcloud(Hbuild)开发混合app
最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的plus这个环境变量,难倒每次都得使用npm run build先把vue打包,然后再用Hbuild打开...
2018-05-22
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
webpack的proxyTable无效的解决方案
最近遇到这个需要单页访问跨域后台的问题。 遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。 经过几轮测试,总结出一下几种解决方案: 1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器...
2018-06-15
浅析Node.js的Stream模块中的Readable对象
我一直都很不愿意扯 nodejs 的流,因为从第一次看到它我就觉得它的设计实在是太恶心了。但是没办法,Stream 规范尚未普及,而且确实有很多东西都依赖了 nodejs 的流来实现的,所以我也只能捏着鼻子硬着头皮来扯一扯这又臭又硬的 no...
2017-03-27
nodejs的压缩文件模块archiver用法示例
本文实例讲述了nodejs的压缩文件模块archiver用法。分享给大家供大家参考,具体如下: 发现了个更好用的 zip-local https://www.npmjs.com/package/zip-local var zipper = ...
2017-03-06
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
Node.js之网络通讯模块实现浅析
前言 想必我们在用Node.js用的最多的应该是创建http服务,所以对于每个Web开发工程师而言,Node.js的网络相关模块学习是必不可少。 Node.js的网络模块架构 在Node.js的模块里面,与网络相关的模块有Net、DNS、H...
2017-04-05
回到顶部