首页 > 编程学习 > webpack学习笔记(十)模块与依赖

webpack学习笔记(十)模块与依赖

发布时间:2022/11/5 21:11:00

在模块化编程中,开发者会将程序分解成功能离散的一些文件,我们把这些文件称之为模块,每个模块都很轻量,这就使得项目的调试、验证、测试比较容易。这些模块提供了可靠的抽象和封装界限。使得应用程序的每个模块具备了条例清晰的设计和明确的目的。

大多数浏览器都支持了esm模块化

ECMAScript模块、CommonJS模块、AMD模块、Assets模块

模块解析

webpack是通过Resolvers实现模块之间的依赖和引用。
所引用的模块可以是来自应用程序的代码,也可以是第三方库。resolver帮助webpack从每个require/import语句中,找到需要引入的bundle中的模块代码。当打包模块时,webpack使用enhance-resolve来解析文件路径。

webpack能够解析三种文件路径:

  1. 绝对路径(相对于项目的更目录)/src/math.js /代表根
  2. 相对路径
  3. 模块路径,即全局的node_modules路径
    在这里插入图片描述
    绝对路径:/src/components/Header.js
    相对路径:‘./components/Header.js’
    模块路径:’import _ from 'lodash'‘ 默认在node_modules里找相对应的模块(无.无/)

给一些路径设置别名

const path = require('path');
module.exports = {
	//...
	resolve:{
		alias:{
			'@':path.resolve(__dirname,'./src')
		},
		// 当引入文件时,没有加文件后缀时,左到右的顺序,去识别扩展名【与loader不一样】
		extensions:['.json','.js','.vue']
}

外部扩展

有时候我们为了减少bundle的体积,从而把一些不变的第三方库用cdn的形式引入进来,比如jquery
在我们自己开发工具或者做组件库的时候很有用

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

引入jquery时,三种模块引入的方式都不行,因此webpack提供了Externals的配置属性,让我们可以配置外部扩展模块

module.exports = {
	//...
	resolve:{
		alias:{
			'@':path.resolve(__dirname,'./src')
		},
		// 当引入文件时,没有加文件后缀时,左到右的顺序,去识别扩展名【与loader不一样】
		extensions:['.json','.js','.vue']
}
Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式