webpack5学习与实战-（十二）-webpack模块与解析原理

深度学习来源：网络编辑：小编更新时间：2024-12-01 10:36:07 浏览量：20

一，在webpack中何为模块

当我们在代码中引入使用的这些东西，都可以成为webpack的模块。
在这里插入图片描述

二，模块的引入

webpack能够解析三种常见的模块引入方法。

1，相对路径

在这里插入图片描述

2，绝对路径

绝对路径就是从项目的根目录开始的。这个"/"就是指代的项目根目录：

3，第三方模块的引入

import _ from "lodash"; console.log("---", _.join(["webpack", "module"], "-"));

webpack会自动从node_module中识别并引入对应的第三方库。

三，路径别名

当我们在写业务代码的时候，经常需要引入组件，如果一个组件隐藏的太深，就很麻烦。为了简化路径的写法，于是就有了路径别名：

 resolve: { 
    alias: { 
    "@": path.resolve(__dirname, "../src") //配置路径别名，__dirname是node的一个全局变量，记录当前文件的绝对路径（是这个配置文件在的目录） } },

在这里插入图片描述

四，外部扩展

有时候，我们为了减小bundle的体积，会把一些不变的第三方库用cdn的形式引入进来。比如jQuery,我们会在html文件中通过script中引入使用。但是我们更希望webpack帮助我们做这件事情。于是可以在webpack中配置external:

 externalsType: "script", externals: { 
    jquery: ["https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js", "$"] },

这样之后，在代码中引入jquery，会暴露为一个$的对象，可以直接使用。并且它的引入，是首屏资源引入之后，执行到这部分代码时才会引入，这样可以减少首屏的js加载时间。
在这里插入图片描述

到此这篇webpack5学习与实战-（十二）-webpack模块与解析原理的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： canvas学习笔记

下一篇： webpack5学习与实战-（八）-配置打包后的文件名

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rgzn-sdxx/11022.html