Skip to content

Commit

Permalink
feat: 新增前端工程化模块
Browse files Browse the repository at this point in the history 
调整目录设计，webpack 内容移到工程化下面，并添加 git 模块。
  • Loading branch information
@niexia
niexia committed Feb 8, 2020
1 parent 78b0e29 commit 2ea933f
Show file tree
Hide file tree
Showing 8 changed files with 23 additions and 23 deletions.
0 docs/webpack/优化.md → docs/fee/README.md
View file
File renamed without changes.
Empty file added docs/fee/git/README.md
View file
Empty file.
0 docs/webpack/vue-cli2中的配置说明.md → docs/fee/webpack/vue-cli2中的配置说明.md
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion docs/webpack/README.md → docs/fee/webpack/介绍.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

![webpack](../.vuepress/public/images/webpack.png)
![webpack](../../.vuepress/public/images/webpack.png)

在开始前你需要先理解一些核心概念。相关的详细内容直接看 [webpack](https://webpack.docschina.org/concepts/) 官方文档。

Expand Down
26 changes: 13 additions & 13 deletions docs/webpack/从入门到真实项目配置.md → docs/fee/webpack/从入门到真实项目配置.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ npm install --save-dev webpack@3.6.0

按照下面的目录结构创建对应的文件

![config-1](../.vuepress/public/images/webpack-config-1.png)
![config-1](../../.vuepress/public/images/webpack-config-1.png)

文件的内容分别为：

Expand Down Expand Up @@ -83,7 +83,7 @@ node_modules\.bin\webpack

然后就可以看到执行的结果如下：

![config-2](../.vuepress/public/images/webpack-config-2.png)
![config-2](../../.vuepress/public/images/webpack-config-2.png)

可以看到，原来两个文件的大小为 100B，打包之后的文件 `bundle.js` 大小为 2.66kB，webpack 肯定做了什么事情，打开 `bundle.js`，把一些注释删掉之后，可以看到：

Expand Down Expand Up @@ -183,7 +183,7 @@ node_modules\.bin\webpack

然后再次执行 `npm run start`，可以发现和之前的效果是相同的。简单的使用到此为止，接下来我们来探索 webpack 更多的功能。

![config-3](../.vuepress/public/images/webpack-config-3.png)
![config-3](../../.vuepress/public/images/webpack-config-3.png)

注：npm 会在项目的 `package.json` 文件中寻找 `scripts` 区域，其中包括 `npm test` 和 `npm start` 等命令。其实 `npm test` 和 `npm start` 是 `npm run test` 和 `npm run start` 的简写。事实上，你可以使用 `npm run` 来运行 `scripts` 里的任何条目。使用 `npm run` 的方便之处在于，npm 会自动把 `node_modules/.bin` 加入 `$PATH`，这样你可以直接运行依赖程序和开发依赖程序，不用全局安装了。

Expand Down Expand Up @@ -285,7 +285,7 @@ console.log(sum(1, 2))

目前的文件夹结构如下：

![config-4](../.vuepress/public/images/webpack-config-4.png)
![config-4](../../.vuepress/public/images/webpack-config-4.png)

然后修改 `webpack.config.js` 配置：

Expand Down Expand Up @@ -320,7 +320,7 @@ module: {

最后执行 `npm run start`，看一下打包结果：

![config-5](../.vuepress/public/images/webpack-config-5.png)
![config-5](../../.vuepress/public/images/webpack-config-5.png)

一开始未指定版本会导致打包之后，图片不能正确显示，可以从参考这个 issue [wrong URLs [object Object] with file-loader@1](https://github.com/webpack-contrib/html-loader/issues/140)。所以需要指定为较低的版本

Expand Down Expand Up @@ -382,7 +382,7 @@ document.body.appendChild(bigImg);

运行下 `npm run start`，然后刷新页面，可以发现图片被正确的加上了边框，现在我们来看一下 HTML 的文件结构：

![config-6](../.vuepress/public/images/webpack-config-6.png)
![config-6](../../.vuepress/public/images/webpack-config-6.png)

从上图可以看到，我们在 `img.css` 文件中写的代码被加入到了 style 标签中，并且因为我们开启了 CSS 模块化的选项，所以 `.test` 被转成了唯一的哈希值，这样就解决了 CSS 的变量名重复问题。

Expand Down Expand Up @@ -550,7 +550,7 @@ module.exports = {

执行 `npm run start` 之后，就可以看到生成了 `dist/bundle.js` 文件。现在还需要在 `index.html` 文件先手动引入这个文件，然后再用浏览器打开 `index.html`，就可以看到熟悉的页面了。

![config-7](../.vuepress/public/images/webpack-config-7.png)
![config-7](../../.vuepress/public/images/webpack-config-7.png)

这时候你会发现这个 `bundle.js` 居然有这么大，这肯定是不能接受的，所以接下来内容的主要目的就是将单个文件拆分为多个文件，优化项目。

Expand Down Expand Up @@ -581,7 +581,7 @@ module.exports = {

然后再执行一遍，生成了两个文件了。但是，为什么 `bundle.js` 文件大小压根没变。这是因为 `bundle.js` 中也引入了依赖库的代码，刚才的步骤并没有抽取 `bundle.js` 中引入的代码，接下来让我们学习如何将共同的代码抽取出来。

![config-8](../.vuepress/public/images/webpack-config-8.png)
![config-8](../../.vuepress/public/images/webpack-config-8.png)

### Common chunk

Expand Down Expand Up @@ -621,13 +621,13 @@ module.exports = {

然后再执行 `npm run start`，看一下结果，正确的抽离代码了。

![config-9](../.vuepress/public/images/webpack-config-9.png)
![config-9](../../.vuepress/public/images/webpack-config-9.png)

### 删除不需要的文件

但是我们使用哈希来保证缓存的同时，每次修改之后会发现每次 build 都会生成不一样的文件，这时候我们引入另一个插件来帮助我们删除不需要的文件。

![config-10](../.vuepress/public/images/webpack-config-10.png)
![config-10](../../.vuepress/public/images/webpack-config-10.png)

```shell
npm install --save-dev clean-webpack-plugin@0.1.19
Expand All @@ -653,7 +653,7 @@ plugins: [

然后再执行 `npm run start` 的时候会发现以上文件被删除了。

![config-11](../.vuepress/public/images/webpack-config-11.png)
![config-11](../../.vuepress/public/images/webpack-config-11.png)

### 自动生 HTML

Expand Down Expand Up @@ -682,7 +682,7 @@ module.exports = {

再次执行指令之后，就会自动生成一个 `dist/index.html` 文件，并自动注入

![config-12](../.vuepress/public/images/webpack-config-12.png)
![config-12](../../.vuepress/public/images/webpack-config-12.png)

```html
<!-- ... -->
Expand Down Expand Up @@ -736,7 +736,7 @@ export default new Router({

执行 `npm run start` 之后，HelloWorld 会被打包到一个单独的文件：

![config-13](../.vuepress/public/images/webpack-config-13.png)
![config-13](../../.vuepress/public/images/webpack-config-13.png)

### 自动刷新

Expand Down
Empty file added docs/fee/webpack/优化.md
View file
Empty file.
Empty file added docs/network/README.md
View file
Empty file.
18 changes: 9 additions & 9 deletions docs/network/http.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

发送端在发起请求之后，经过每一层都会加上首部信息。接收端接收之后，每经过一层就会删除相应的头部。

![http-request-process](../../.vuepress/public/images/network-http-requestProcess.png)
![http-request-process](../.vuepress/public/images/network-http-requestProcess.png)

### 关键点

Expand Down Expand Up @@ -34,15 +34,15 @@ DNS：好的，hackr.jp 对应的ip地址是 20.189.105.112

2. http 协议：对请求的内容处理。哦，原来你想要这台计算机上/xss/的资源啊

![http-request-detail](../../.vuepress/public/images/network-http-requestDetail.png)
![http-request-detail](../.vuepress/public/images/network-http-requestDetail.png)

## 三次握手

三次握手目的是为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

发送端首先发一个带SYN标志的数据给对方。接受端接受到之后回传一个带有SYN/ACK标志的数据包以传达确认信息。最后，发送端再回传一个带ACK标志的数据包，代表握手结束。

![three-times-handshake](../../.vuepress/public/images/network-http-threeTimesHandshake.png)
![three-times-handshake](../.vuepress/public/images/network-http-threeTimesHandshake.png)

就好像是这样的对话：

Expand Down Expand Up @@ -83,7 +83,7 @@ Client 会在发送出 ACK 之后进入到 TIME_WAIT 状态。Client 会设置

客户端像服务器发起请求时会生成一段请求报文，**请求报文是由请求方法、URL、协议版本，可选的请求首部字段和内容实体构成**。

![http-request](../../.vuepress/public/images/network-http-request.png)
![http-request](../.vuepress/public/images/network-http-request.png)

接收到请求的服务器，会将请求内容的处理结果以响应的形式返回。

Expand All @@ -104,13 +104,13 @@ Content-Type: text/html

响应报文基本上由协议版本、状态码（表示请求成功或失败的数字代码）、用以解释状态码的原因短语、可选的响应首部字段以及实体主体构成。

![http-response](../../.vuepress/public/images/network-http-response.png)
![http-response](../.vuepress/public/images/network-http-response.png)

## HTTP 是不保存状态的协议

HTTP 是一种不保存状态，即无状态（stateless）协议。HTTP 协议自身不对请求和响应之间的通信状态进行保存。也就是说在 HTTP 这个级别，协议对于发送过的请求或响应都不做持久化处理。

![http-request](../../.vuepress/public/images/network-http-stateless.png)
![http-request](../.vuepress/public/images/network-http-stateless.png)

使用 HTTP 协议，每当有新的请求发送时，就会有对应的新响应产生。协议本身并不保留之前一切的请求或响应报文的信息。这是为了更快地处理大量事务，确保协议的可伸缩性，而特意把 HTTP 协议设
计成如此简单的。
Expand All @@ -121,14 +121,14 @@ HTTP/1.1 虽然是无状态协议，但为了实现期望的保持状态功能

Cookie 会根据从服务器端发送的响应报文内的一个叫做 Set-Cookie 的首部字段信息，通知客户端保存 Cookie。当下次客户端再往该服务器发送请求时，客户端会自动在请求报文中加入 Cookie 值后发送出去。

![http-cookie](../../.vuepress/public/images/network-http-cookie-1.png)
![http-cookie](../../.vuepress/public/images/network-http-cookie-2.png)
![http-cookie](../.vuepress/public/images/network-http-cookie-1.png)
![http-cookie](../.vuepress/public/images/network-http-cookie-2.png)

## 状态码

HTTP 状态码负责表示客户端 HTTP 请求的返回结果、标记服务器端的处理是否正常、通知出现的错误等工作。

![http-statusCode](../../.vuepress/public/images/network-http-statusCode.png)
![http-statusCode](../.vuepress/public/images/network-http-statusCode.png)

### 2XX 成功

Expand Down

0 comments on commit 2ea933f

Please sign in to comment.