脚本宝典收集整理的这篇文章主要介绍了webpack--resolve,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库;
resolve可以帮助webpack从每个 require/import 语句中,找到需要引入到合适的模块代码
webpack 使用 enhanced-resolve 来解析文件路径;
在这种情况下,使用 import 或 require 的资源文件所处的目录,被认为是上下文目录;
在 import/require 中给定的相对路径,会拼接此上下文路径,来生成模块的绝对路径;
在 resolve.modules中指定的所有目录检索模块;
默认值是 ['node_modules'],所以默认会从node_modules中查找文件;
我们可以通过设置别名的方式来替换初识模块路径,具体后面讲解alias的配置;
如果文件具有扩展名,则直接打包文件;
否则,将使用 resolve.extensions选项作为文件扩展名解析;
resolve.mainFiles的默认值是 ['index'];
再根据 resolve.extensions来解析扩展名;
如果文件夹里默认是 index.js -----> 则可以省略index.js
如果是.js文件,可以直接省略扩展名; 为什么可以省略.js? 因为 默认值是 ['.wasm', '.mjs', '.js', '.json'];
如果省略 .vue .tx .jsx 是会报错的, 因为需要通过 extensions 来手动添加
默认值是 ['.wasm', '.mjs', '.js', '.json'];
所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时,我们必须自己写上扩展名
特别是当我们项目的目录结构比较深的时候,或者一个文件的路径可能需要 ../../../这种路径片段;
我们可以给某些常见的路径起一个别名;
这种就是 我们经常在vue项目里 引入 组件一样
为什么 @ 可以直接找到 components文件?
因为给 @ 指定到根目录了 也就是 src --> src/components
以上是脚本宝典为你收集整理的webpack--resolve全部内容,希望文章能够帮你解决webpack--resolve所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。