# webpackLearning

**Repository Path**: hh-mdzz/webpack-learning

## Basic Information

- **Project Name**: webpackLearning
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-27
- **Last Updated**: 2024-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### webpack

webpack-cli:用于打包
npm i webpack webpack-cli -D
在 webpack5 中必须要与 webpack-cli 一起安装(-cli 为命令行工具，如 webpack-cli，swc-cli,vite-cli 等)

```
在安装完此工具后可以在命令行调用 webpakck 命令如：npx webpack -i input.js -o bundle.js 使用指定的输入文件 input.js 来创建输出文件 bundle.js
```

webpack-dev-server：启动一个服务
npm i webpack-dev-server -d

在 package.json 文件中如下配置便可以使用 npm run 来运行相应命令
"scripts": {
"dev": "webpack-dev-server", //配置 dev 命令启用 webpack-dev-server
"build": "webpack" //配置 build 命令启用 webpack
}

webpack5 自带 treeShaking 树摇技术:
声明的变量、函数以及永远走不进去的 if 会被摇掉，不会在打包后出现

webpack 只能支持 js 代码和 json，若要处理其他文件则需要相应的 loader 来支持，如：对于图片、多媒体等静态资源，使用 url-loader 处理成 base64 编码；对于 css 和 html 分别使用某 loader 和 html-loader 处理成 js。如果需要增加一些新的功能则需要 plugin 支持
因此处理 ts 需要 ts-loader，而 ts-loader 需要支持 typeScript，在控制台中输入：npm i ts-loader typeScript 用于处理 ts。在 webpage.config.js 中见详情配置
对比 ts-loader 和 swc-loader：
ts-loader 1276 ms
swc-loader 246 ms
发现使用 swc-loader 的速度更快

处理图片等静态资源可以使用 url-loader 或 file-loader
url-loader 会将 base64 编码直接放在代码中，当文件小时可减少 http 请求次数，提高性能；但文件太大会导致代码体积变大，使得文件下载时间变长影响性能
file-loader 则将文件复制到输出目录，并返回文件的路径，适合处理大文件。其不会影响代码体积，但会增加 HTTP 请求次数可能会影响性能
实际上两者常常结合使用，见 webpage.config.js

html-webpack-plugin：自动生成 HTML 文件并将其插入到某个 html 中
在 webpack.config 引入后可在 plugins 中进行配置，详细见 webpage.config.js

### CDN

内容分发网络

我的服务器在北京 你在上海 访问我的网站但是我的网站用的是北京服务器部署的

你要从上海经过各种路由器 才能访问到我的服务器 TTL 就是代表你走过的路由器

CDN 就是解决这个问题的

阿里云你购买了 CDN 服务 把你的项目部署上去了
阿里云它就会 分发服务器 各个省份的服务器同步

你在上海访问 那就给你指向上海的服务器了
你在北京访问 那就给你指向北京的服务器了
并且自带负载均衡 还有缓存


访问一个网址的过程：
第一步 浏览器的 DNS 缓存
第二步 查找 etc 目录下面的 DNS 缓存
第三步 查找本地 HOST 文件对应的 ip
第四步 发送 DNS 请求 1. 根域名查找 . 2. 顶级域名查找 com. cn. 3. 权威域名查找 baidu.com.
如果配置了 CDN 不会经过这个第四步 CDN 服务器去找 DNS 服务器就近分配