webpack解析代码模块路径的实现方法
小编给大家分享一下webpack解析代码模块路径的实现方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联公司长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为月湖企业提供专业的成都网站建设、成都网站设计，月湖网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
前言
webpack是如何解析代码模块路径
webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的，这个模块可以说是 Node.js 那一套模块路径解析的增强版本，有很多可以自定义的解析配置。
模块解析规则
解析相对路径
查找相对当前模块的路径下是否有对应文件或文件夹
是文件则直接加载
是文件夹则继续查找文件夹下的 package.json 文件
有 package.json 文件则按照文件中 main 字段的文件名来查找文件
无 package.json 或者无 main 字段则查找 index.js 文件.
解析模块名
查找当前文件目录下，父级目录及以上目录下的 node_modules 文件夹，看是否有对应名称的模块
解析绝对路径（不建议使用）
直接查找对应路径的文件
在 webpack 配置中，和模块路径解析相关的配置都在 resolve 字段下：
module.exports = {
resolve: {
// ...
}
}resolve.alias
假设我们有个 utils 模块极其常用，经常编写相对路径很麻烦，希望可以直接 import 'utils' 来引用，那么我们可以配置某个模块的别名，如：
alias: {
utils: path.resolve(__dirname, 'src/utils')
// 这里使用 path.resolve 和 __dirname 来获取绝对路径
}上述的配置是模糊匹配，意味着只要模块路径中携带了 utils 就可以被替换掉，如：
import 'utils/query.js' // 等同于 import '[项目绝对路径]/src/utils/query.js'
如果需要进行精确匹配可以使用：
alias: {
utils$: path.resolve(__dirname, 'src/utils')
// 只会匹配 import 'utils'
}更多匹配相关的写法可以参考官方文档 Resolve Alias，这里不一一举例说明。
resolve.extensions
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'], // 这里的顺序代表匹配后缀的优先级，例如对于 index.js 和 index.jsx，会优先选择 index.js
看到数组中配置的字符串大概就可以猜到，这个配置的作用是和文件后缀名有关的。是的，这个配置可以定义在进行模块路径解析时，webpack 会尝试帮你补全那些后缀名来进行查找，例如有了上述的配置，当你在 src/utils/ 目录下有一个 common.js 文件时，就可以这样来引用.
import * as common from './src/utils/common'
webpack 会尝试给你依赖的路径添加上 extensions 字段所配置的后缀，然后进行依赖路径查找，所以可以命中 src/utils/common.js 文件。
resolve.modules
前面的内容有提到，对于直接声明依赖名的模块（如 react ），webpack 会类似 Node.js 一样进行路径搜索，搜索 node_modules 目录，这个目录就是使用 resolve.modules 字段进行配置的，默认就是：
resolve: {
modules: ['node_modules'],
},如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules 中的话，那么可以在 node_modules 之前配置一个确定的绝对路径：
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'), // 指定当前目录下的 node_modules 优先查找
'node_modules', // 如果有一些类库是放在一些奇怪的地方的，你可以添加自定义的路径或者目录
],
}这样配置在某种程度上可以简化模块的查找，提升构建速度。
后言
resolve 还有一些其他的配置，还有其他的伙伴那就去官网看看，以上都是实际项目中使用到的。
看完了这篇文章，相信你对“webpack解析代码模块路径的实现方法”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
网页名称：webpack解析代码模块路径的实现方法
URL地址：http://cdiso.cn/article/gjisde.html
