webpack 如何解析代码模块路径的实现

前言

webpack是如何解析代码模块路径

webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的增强版本,有很多可以自定义的解析配置。

模块解析规则

解析相对路径

  1. 查找相对当前模块的路径下是否有对应文件或文件夹
  2. 是文件则直接加载
  3. 是文件夹则继续查找文件夹下的 package.json 文件
  4. 有 package.json 文件则按照文件中 main 字段的文件名来查找文件
  5. 无 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 还有一些其他的配置,还有其他的伙伴那就去官网看看,以上都是实际项目中使用到的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 深入理解Webpack 中路径的配置

    前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac

  • 浅谈webpack打包过程中因为图片的路径导致的问题

    最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打

  • webpack+vue中使用别名路径引用静态图片地址

    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components')

  • webpack打包后直接访问页面图片路径错误的解决方法

    前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:

  • 解决vue+webpack打包路径的问题

    最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下. 资源路径如下: public目录配置的访问路径为"/",在这样的情况下,我们的访问路径就变成了"域名/vue-demo".访问的时候发下程序未报错,但是页面一片空白.此前也这样发布的项目都没有问题,但这次是怎么回事呢? 仔细探索后发现是vue-router搞得鬼.因项目需要,所以使用了滚动行为,滚动行为必须开启history模式,在

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • Webpack中publicPath路径问题详解

    最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output output选项指定webpack输出的位置,其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值: process.cwd() output.path 只是指示输出的目录,对应一个 绝对路径 ,例如在项目

  • webpack配置打包后图片路径出错的解决

    问题 项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了. 图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在. 打包后文件目录如下: 可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了 方法一 查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理. module: { rule

  • webpack学习教程之publicPath路径问题详解

    本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> <script src="b.js"></script> </body&g

  • vue和webpack打包项目相对路径修改的方法

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: assetsPublicPath: './' 2.解决css里面的路径问题,打开utils.js 添加红色框参数即可: publicPath: '../../' 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • webpack踩坑之路图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(photo.jpg)"></div

  • 解决vue-cli webpack打包后加载资源的路径问题

    vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯的在背景图使用相对路径导致加

随机推荐