webpack依赖图
2023-02-25 18:16:15 时间
什么是图结构?
我们的模块间存在着依赖关系,比如main.js中加载了foo.js,foo.js中又加载了bar.js,main.js中也肯能直接调用了bar.js。他们之间的关系就是一种图(Graph)数据结构。最终将多个js脚本合成唯一的js脚本。
非线性结构
图是一种复杂的非线性结构。而在图形结构中,节点之间的关系是任意的,图中任意两个数据元素之间都有可能相关。
所以图的任意点之间都有可能存在关联。
演示一下
演示准备
我们新建一个index.html文件,我们这里先通过script标签引入我们一会要打包好的build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/build.js"></script>
</body>
</html>
然后现在浏览器中打开index.html方便一会我们看效果。
图结构(互相依赖)
src文件夹下 新建index.js 和 lg.js 和 api.js。
api.js
中模拟接口返回一个对象,然后在index.js
调用了api和 lg.js
。 lg.js
也调用了api.js
,形成了图结构。
// index.js
const test =(a,b)=>{
return a*b
}
console.log(11)
console.log(test(2,10))
//lg.js
import {api} from './api'
api().then(v=>{
console.log('lg',v)
})
// api.js
export function api(){
return new Promise((reslove)=>{
setTimeout(()=>{
reslove({'message':'1233'})
},2000)
})
}
webpack配置文件
我们现在webpack配置文件的名字,用的是约定俗成的 webpack.config.js。当我们需要更改配置文件名称时可以使用 --config
我们将 webpack.config.js改名为xxx.webpack.js。然后更改package.json中的build命令。 这里通过 --config
指定配置文件的名称。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config xxx.webpack.js --mode=development"
},
相关文章
- 工作 - 我的闪存
- LeetCode - 无重复字符的最长子串
- 《HelloGitHub》第 79 期
- 下一代工具链「GitHub 热点速览 v.22.43」
- intel 13代U情况
- LeetCode - 两数相加
- 风雨沧桑50年:中国卫星通信的发展历程(中)
- 请收下这 10 个安全相关的开源项目
- LeetCode - 两数之和
- 关于卫星互联网的最强入门科普
- 插值查找的简单理解
- 再来一次,新技术搞定老业务「GitHub 热点速览 v.22.44」
- 业务 - 我的闪存
- 二分查找的简单理解
- 《勒索软件防护发展报告(2022年)》正式发布,助力企业高效应对勒索软件攻击
- 技术 - 我的闪存
- 基数排序的简单理解
- 国内首部5G电视剧上映,速度围观!
- 桶排序的简单理解
- 宝塔后渗透-添加用户|反弹shell