-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
330 lines (249 loc) · 32.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!DOCTYPE html><html lang="en" data-theme="light"><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, maximum-scale=1.0"><title>ZHPER 的笔记</title><meta name="author" content="zhper"><meta name="copyright" content="zhper"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="ZHPER 的笔记">
<meta property="og:url" content="https://zhper.vercel.app/index.html">
<meta property="og:site_name" content="ZHPER 的笔记">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://zhper.vercel.app/assets/avatar.png">
<meta property="article:author" content="zhper">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://zhper.vercel.app/assets/avatar.png"><link rel="shortcut icon" href="/assets/favicon/%E4%BF%9D%E5%85%BB%E6%89%8B%E5%86%8C.png"><link rel="canonical" href="https://zhper.vercel.app/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: 'Copy successfully',
error: 'Copy error',
noSupport: 'The browser does not support'
},
relativeDate: {
homepage: true,
post: false
},
runtime: '',
date_suffix: {
just: 'Just',
min: 'minutes ago',
hour: 'hours ago',
day: 'days ago',
month: 'months ago'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false,
percent: {
toc: true,
rightside: false,
}
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'ZHPER 的笔记',
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2023-03-10 21:48:55'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.getCSS = url => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
link.onload = () => resolve()
link.onerror = () => reject()
document.head.appendChild(link)
})
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/assets/avatar.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">10</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">0</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="ZHPER 的笔记"><span class="site-name">ZHPER 的笔记</span></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/2023/02/08/css/" title="CSS"><img class="post-bg" src="/assets/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/css/" title="CSS">CSS</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/CSS/">CSS</a></span></div><div class="content">单位
px
绝对单位、精确的像素
em
相对单位
基准点为父节点字体的大小。如果自身定义了 font-size，则按照自身计算。因此整个页面的 1em 不是一个固定的值
rem
相对单位
可以理解为 root em，按照 根节点为基准进行计算的相对单位
vw，vh，vmin，vmax
vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%。
vh：viewpoint height，视窗高度，1vh 等于视窗高度的 1%。
vmin：表示视口宽度和高度中较小的那个的百分比。你可以用它来设置长度值，比如 width, margin, padding 等, 这样他的大小就会随视口大小自适应， 1vmin 就表示较小的那个长度的 1%
vmax：表示视口宽度和高度中较小的那个的百分比。同理
Display
none
display: none 指定的元素将不会被显示
这种方式隐藏的元素不会保留空间
相似的： visible: hidden 也是使元素不被显示出来，但是会保留他的空间
block
display: block ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/02/08/html/" title="HTML"><img class="post-bg" src="/assets/html.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="HTML"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/html/" title="HTML">HTML</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/HTML/">HTML</a></span></div><div class="content">HTML 语义化
让人跟容易看懂（增加代码的可读性）
让搜索引擎更容易看懂
在没有 CSS 样式下，页面也能呈现出很好的内容结构、代码结构
script 标签中的属性HTML 中的 <script> 标签包含下列 8 个属性：
async
charset
crossorigin
defer
integrity
language
src
type
我们重点关注 async 和 defer 属性
script 如果上面两个属性都不包括，那么此时的 script 标签将会阻碍 HTML 的解析，只有下载成功并执行完脚本，才会继续解析 HTML。
async script 属性表示异步下载，即在解析 HTML 的过程中进行脚本的异步下载，下载成功后立刻执行（仍然可能阻断 HTML 的解析）
下载完就执行
defer script 属性同样是在解析 HTML 的过程进行脚本的异步下载，但是只有在 HTML 解析完成之后才会顺序执行脚本
渲染完再执行
在 <script> 元素中的代码被计算完成之前，页面的其 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/02/08/ts/" title="TypeScript"><img class="post-bg" src="/assets/ts.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeScript"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/ts/" title="TypeScript">TypeScript</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/TypeScript/">TypeScript</a></span></div><div class="content">是什么Promise 是 JS 中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数
从语法上来说: Promise 是一个构造函数
从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功失败的结果值
promise 支持链式调用，可以解决回调地狱问题
</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/02/08/%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/" title="基本使用"><img class="post-bg" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="基本使用"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/" title="基本使用">基本使用</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/introduction/">introduction</a></span></div><div class="content">基础用法说明Front-matterFront-matter 是 markdown 文件最上方以---分隔的区域，用于指定个别档案的变数。
Page Front-matter 用于页面配置
Post Front-matter 用于文章页配置
Page Front-matter：
写法
解释
title
【必需】页面标题
date
【必需】页面创建日期
type
【必需】标籤、分类和友情链接三个页面需要配置
updated
【可选】页面更新日期
description
【可选】页面描述
keywords
【可选】页面关键字
comments
【可选】显示页面评论模块(默认 true)
top_img
【可选】页面顶部图片
mathjax
【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
kates
【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside
【可选】显示侧边栏 (默 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/02/08/react/" title="React"><img class="post-bg" src="/assets/react.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="React"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/react/" title="React">React</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/React/">React</a></span></div><div class="content">JSXjsx 语法规则1.写虚拟 DOM 时，不要写引号。
2.标签中混入 JS 表达式时，要使用花括号 {} 。
3.样式的类名指定不要用 class ，要用 className 。
4.内联样式，要用 style={{key: value}} 的形式去写。
此处的第一个 {} 源于规则 2，表示内部是一个 js 对象
5.虚拟 DOM 只能有一个根标签。
6.标签必须闭合。
7.标签首字母
若小写字母开头，则将该标签转为 html 同名元素，若 html 中无该标签中的同名元素，则报错
若大写字母开头， react 就去渲染对应的组件，若组件没有报错，则报错。
React 必须在作用域内参考下面这个示例：
1234import React from 'react'function Demo() { return <div>Hello, JSX</div>}
虽然我们没有直接使用导入的 React，但是仍然需要导入，这是因为导入 React 才规定了这是 J ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/02/08/%E6%A8%A1%E5%9D%97%E5%8C%96/" title="模块化"><img class="post-bg" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="模块化"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/%E6%A8%A1%E5%9D%97%E5%8C%96/" title="模块化">模块化</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E6%A8%A1%E5%9D%97%E5%8C%96/">模块化</a></span></div><div class="content">理解1.什么是模块?
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
2.模块化的进化过程
全局 function 模式 : 将不同的功能封装成不同的全局函数
编码: 将不同的功能封装成不同的全局函数
问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系
123456function m1(){ //...}function m2(){ //...}复制代码
namespace 模式 : 简单对象封装
作用: 减少了全局变量，解决命名冲突
问题: 数据不安全(外部可以直接修改模块内部的数据)
1234567891011let myModule = { data: 'www.baidu.com', foo() { console.log(`foo() ${this.data}`) }, ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/02/08/%E6%89%8B%E5%86%99/" title="常见手写"><img class="post-bg" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="常见手写"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/%E6%89%8B%E5%86%99/" title="常见手写">常见手写</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E6%89%8B%E5%86%99/">手写</a></span></div><div class="content"></div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/02/08/webpack/" title="Webpack"><img class="post-bg" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Webpack"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/webpack/" title="Webpack">Webpack</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-03-09T15:27:50.756Z" title="Updated 2023-03-09 23:27:50">2023-03-09</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/Webpack/">Webpack</a></span></div><div class="content">介绍打包工具开发时，我们会使用一些技术框架（React、Vue 等）、ES6 模块化语法、Less/Sass 等 CSS 预处理器进行开发。这些必须经过编译成浏览器能识别的 JS、CSS 等语法才能最终在浏览器中运行。
打包工具就可以帮助我们完成这些工作。除此之外，打包工具还可以帮助我们压缩代码、进行兼容性处理，以及提升性能等等。
常见的打包工具有：Grunt、Gulp、Webpack、Vite 等等。
基本使用Webpack 以一个或多个文件作为入口，将我们整个项目所有文件编译组合为一个或多个文件输出。输出的文件就是编译好的文件，即可以在浏览器运行的文件。我们通常将 Webpack 输出的文件叫做 bundle。
项目目录一个典型的项目基本目录如下：
123Code # 根目录（所有指令都必须在这个目录下运行） |-- public # 静态资源目录 |-- src # 源码目录
下载依赖首先初始化 npm 环境：
1npm init -y
初始化后的项目目录结构如下：
1234Code # 根目录（所有指令都必须在这个目录下运行） |-- public # 静态资源目录 |-- ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/2023/02/08/js/" title="JavaScript"><img class="post-bg" src="/assets/js.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/js/" title="JavaScript">JavaScript</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-03-09T15:25:40.488Z" title="Updated 2023-03-09 23:25:40">2023-03-09</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/JavaScript/">JavaScript</a></span></div><div class="content">数据类型原始数据类型（简单数据类型）Undefined、Null、Bollean、Number、String、Symbol、BigInt
引用类型（复杂数据类型）Object
其中 Symbol和 BigInt 是 ES6 新增的数据类型
Symbol
每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。
12345var sym1 = Symbol()var sym2 = Symbol('foo')var sym3 = Symbol('foo')Symbol('foo') === Symbol('foo') // falsesym2 === sym3 //false
BigInt
表示大于 2^53-1 的整数，这是在 js 中 Number 可以表示的最大数字
可以在一个整数字面量后面加上n的方式定义一个 BigInt ： 10n， 也可以直接使用BigInt() 包裹一个数字或者字符串
12345678 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/2023/02/08/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" title="计算机网络"><img class="post-bg" src="/assets/compute.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="计算机网络"></a></div><div class="recent-post-info"><a class="article-title" href="/2023/02/08/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" title="计算机网络">计算机网络</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time><span class="article-meta-separator">|</span><i class="fas fa-history"></i><span class="article-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-02-07T16:00:00.000Z" title="Updated 2023-02-08 00:00:00">2023-02-08</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a></span></div><div class="content">HTTPHTTP 协议全称为 Hyper Text Transfer Protocol，即超文本传输协议。HTTP 协议主要用于客户端与服务端之间的通信，浏览器就是最常见的 HTTP 客户端。
HTTP 请求客户端向服务器发送的信息称为 请求报文，结构从上到下包括 请求行、请求头、请求体
请求行用于说明需要做什么， 包含三个部分–方法、资源路径、HTTP 版本
方法： 通过方法指定对请求资源进行怎样的操作做什么样的操作（比如查询、修改等）。常见的方法有：GET、POST、PUT、DELETE 与 HEAD。
资源路径： 指定请求资源在服务器中的位置。比如 /index.html 表示访问服务器根目录下名字为 index 的 html 文件
HTTP 版本：指定所使用的 HTTP 版本。
最常用的两个方法是 GET 和 POST
GET 请求参数存放在 URL 中，而 POST 请求参数存储在请求体中。
参数放在 URL 中可以直接被看到，则 GET 请求相对 POST 请求更不安全。
各个浏览器对 URL 长度做了限制，比如 IE 浏览器限制 URL 的长度最大 ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/assets/avatar.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">zhper</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">10</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">10</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">0</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/zhper" target="_blank" title="Github"><i class="fab fa-github"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content"><center>主域名：<br><a href="https://zhper.vercel.app/"><b><font color="#5ea6e5">zhper.vercel.app</font></b></center></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/02/08/css/" title="CSS"><img src="/assets/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS"/></a><div class="content"><a class="title" href="/2023/02/08/css/" title="CSS">CSS</a><time datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/02/08/html/" title="HTML"><img src="/assets/html.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="HTML"/></a><div class="content"><a class="title" href="/2023/02/08/html/" title="HTML">HTML</a><time datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/02/08/ts/" title="TypeScript"><img src="/assets/ts.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeScript"/></a><div class="content"><a class="title" href="/2023/02/08/ts/" title="TypeScript">TypeScript</a><time datetime="2023-02-07T16:00:00.000Z" title="Created 2023-02-08 00:00:00">2023-02-08</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>Tags</span></div><div class="card-tag-cloud"><a href="/tags/CSS/" style="font-size: 1.1em; color: #999">CSS</a> <a href="/tags/HTML/" style="font-size: 1.1em; color: #999">HTML</a> <a href="/tags/JavaScript/" style="font-size: 1.1em; color: #999">JavaScript</a> <a href="/tags/React/" style="font-size: 1.1em; color: #999">React</a> <a href="/tags/TypeScript/" style="font-size: 1.1em; color: #999">TypeScript</a> <a href="/tags/Webpack/" style="font-size: 1.1em; color: #999">Webpack</a> <a href="/tags/introduction/" style="font-size: 1.1em; color: #999">introduction</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 1.1em; color: #999">手写</a> <a href="/tags/%E6%A8%A1%E5%9D%97%E5%8C%96/" style="font-size: 1.1em; color: #999">模块化</a> <a href="/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" style="font-size: 1.1em; color: #999">计算机网络</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>Archives</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/02/"><span class="card-archive-list-date">February 2023</span><span class="card-archive-list-count">10</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>Info</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">Article :</div><div class="item-count">10</div></div><div class="webinfo-item"><div class="item-name">UV :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">PV :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">Last Push :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-03-10T13:48:55.251Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background: rgb(118, 123, 126,0.1)"><div id="footer-wrap"><div class="copyright">©2023 By zhper</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>