目录
1. yarn包管理器
1.1 yarn 是什么, 有什么用?
1.2 yarn的使用
2. webpack基本概述
2.1 webpack是什么？
2.2 什么是打包？
2.3 webpack能做什么？
3. webpack基本使用步骤
3.1 webpack基本使用步骤
3.2 package.json 中 scripts 的使用
3.3 webpack的基本配置
3.4 yarn build执行流程图
4. webpack插件和loader
4.1 自动生成html - html-webpack-plugin 插件
4.2 webpack处理css文件 - css-loader
4.3 webpack处理 less 文件 - less-loader
4.4 webpack处理图片 - 内置asset模块
4.5 webpack处理字体图标 - 内置asset模块
4.6 webpack处理高版本语法 - babel语法降级
5. webpack开发服务器配置
5.1 webpack-开发服务器
5.2 webpack-开发服务器-端口号配置
1. yarn包管理器
1.1 yarn 是什么, 有什么用?
快速、可靠、安全的 依赖管理工具 。和 npm 类似, 都是 包管理工具 , 可以用于 下载管理依赖包， 比 npm 下载包， 更 稳定 、 快速
1.2 yarn的使用
1.2.1下载安装
windows本推荐通过软件包安装
下载地址: https://yarn.bootcss.com/docs/install/#windows-stable
mac本推荐通过命令全局安装 sudo npm i yarn -g
1.2.2 使用yarn的命令装包
- 初始化 yarn init 或 yarn init -y
- 添加依赖 yarn add [package]@[version]
- 移除包 yarn remove [package]
- 安装项目全部依赖 yarn 或者 yarn install
- 全局命令
- 全局安装 yarn global add [package]
- 全局卸载 yarn global remove [package]
- 全局安装路径 yarn global bin
2. webpack基本概述
2.1 webpack是什么？
webpack是一个基于 NodeJS 的 静态模块打包器（HTML，CSS，JS，图片等资源都属于静态模块）
2.2 什么是打包？
打包基本认知：将多个文件 压缩 合并 处理的过程，就可以称之为是打包
好处：可以 减少请求次数 ， 减轻服务器压力，加快页面访问速度 。
2.3 webpack能做什么？
明确：webpack是 基于NodeJS 的 打包工具。
① 合并压缩 ：将 html/css/js/图片等， 进行 资源 合并压缩 处理（打包）
② 语法转换：
less / sass / stylus => css
es6 / es7 => es5 / es3
typescript => 原生js
...
③ 提供开发服务器： 提供一个开发服务器，监测代码变化，实时打包，实时刷新浏览器 （ 提高开发效率 ）
3. webpack基本使用步骤
3.1 webpack基本使用步骤
- 新建项目文件夹，src/index.js
- 初始化 yarn init -y
- 安装依赖 yarn add webpack webpack-cli -D
- package.json 中，配置 scripts（自定义命令）
目录的说明
- dist 目录 ：存放打包后代码的目录
- src目录 ：存放源代码的目录
3.2 package.json 中 scripts 的使用
1. 配置命令：
在package.json 文件中 ，可以 配置 scripts , 配置我们自己在终端的常用命令
2. 执行脚本：
npm run 命令名 => npm run pp
使用yarn： yarn 命令名 ，不加 run => yarn pp
3.3 webpack的基本配置
webpack基本配置 - 配置入口，出口，模式
官方参考文档： https://webpack.docschina.org/concepts/
1. 入口 entry
说明: 配置入口文件，从哪个文件开始打包
2. 出口 output
说明: 配置输出文件，打包到哪里去
3. 模式 mode：
说明：打包模式
取值：
（1）production（生产环境， 代码压缩 ）
（2）development （开发环境， 代码不压缩 ）
注意 : webpack 基于 node, 所以导出 , 遵守 CommonJS 规范
3.4 yarn build执行流程图
注意: 所有要被打包的资源都要跟入口产生直接/间接的引用关系
4. webpack插件和loader
4.1 自动生成html - html-webpack-plugin 插件
1. html-webpack-plugin 这个插件的作用？ （webpack插件）
打包后，会帮我们 自动 将 public/index.html 拷贝到 dist 下，且会 自动引入 打包后的文件
2. html-webpack-plugin 插件怎么使用？
配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/
（1）下载插件
yarn add html-webpack-plugin -D
（2）导入插件 (webpack.config.js)
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
（3）配置插件 (webpack.config.js)
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' })
]
4.2 webpack处理css文件 - css-loader
举例：现在页面包含了 html 和 js，但是没有 css ，希望添加一点css，处理掉小圆点样式
目标：编写css代码，去掉小圆点，让webpack打包处理
- 新建 - src/css/index.css
- 编写去除li圆点样式代码
- (重要) 一定要引入到入口才会被webpack打包
- 执行打包命令观察效果
报错: 因为webpack默认只能处理js文件
css-loader 文档: https://webpack.docschina.org/loaders/css-loader/
style-loader文档: https://webpack.docschina.org/loaders/style-loade/
编写css文件代码src/css/index.css，在main.js中导入，打包运行，会发现报错了：
原因：
webpack默认只认识 js 文件和 json文件 ！不认识 css 文件，如果要打包处理 js 之外的静态资源，需要配置 loader 来加载预处理文件
明确：要加载处理 css => 需要配置对应的 loader => css-loader
配置 css-loader 的步骤：
1. 安装依赖 yarn add style-loader css-loader -D
2. 配置内容
4.3 webpack处理 less 文件 - less-loader
目标：编写 less 代码，让webpack打包处理 less (需要配置 less-loader)
less-loader文档: https://webpack.docschina.org/loaders/less-loader/
配置 less-loader 的步骤：
- 新建src/less/index.less – 设置li字体大小
- 把index.less引入到入口文件
- 安装依赖 yarn add less less-loader -D
- 配置内容（针对less配置）
- 打包观察效果
4.4 webpack处理图片 - 内置asset模块
- 在src/assets/准备图片文件
- 在index.less对body设置背景图片
- 在入口导入图片文件, 设置到img标签插入到body
- 打包观察效果
报错: 因为webpack无法自己处理图片文件
如果要 解析图片等资源 ，需要用到 webpack 5 内置的 asset 资源处理模块， 已集成，无需安装。
官网地址： https://webpack.docschina.org/guides/asset-modules/
配置 rules 内容：
注意：
（1）对于小于 8k 的图片， 会自动转 base64 字符串 （节约请求次数，成本：放大约30%的图片体积大小）
（2）对于大于 8k 的图片， 会生成单独文件引入 。
配置图片的打包输出目录：
（默认是直接输出到了 dist 根目录, 可以通过 generator 进行配置）
4.5 webpack处理字体图标 - 内置asset模块
- src/assets 下 放入fonts字体相关文件夹(素材里)
- src/main.js 引入 assets/fonts/iconfont.css
- src/main.js 创建一个i标签, 使用字体图标标签添加到body上
- 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)
- 打包后运行网页观察效果
字体图标 和 图片的配置一致，也是用内置的asset模块处理（同样：目录可以通过 generator 进行配置）
4.6 webpack处理高版本语法 - babel语法降级
es6新版本的语法很好用 ，例如：let，const，箭头函数...，但是， es6新版本语法是有兼容性的 。
如果想用高版本的新语法怎么办 => babel语法降级
babel官网: https://www.babeljs.cn/
babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/
babel: 一个javascript编译器, 把 高版本js语法 降级处理 输出兼容的 低版本语法
babel-loader: 可以让webpack转译打包的js代码
步骤：
- 在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
- 安装包：yarn add -D babel-loader @babel/core @babel/preset-env
- 配置规则
5. webpack开发服务器配置
5.1 webpack-开发服务器
问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 比较费时
原因:
- 从0构建依赖
- 从电脑磁盘，读取对应的文件到内存, webpack开始加载
- 再用对应的 loader 进行处理
- 将处理完的内容, 输出到电脑磁盘，指定目录
解决:
起一个开发服务器 , 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用
webpack开发服务器：把代码运行在 内存 中, 保存自动更新 , 实时 返回给浏览器显示
使用步骤：
1. 下载： yarn add webpack-dev-server -D
2. package.json 配置scripts
3. 启动服务器开发： yarn serve
5.2 webpack-开发服务器-端口号配置
webpack-dev-server配置文档:
https://webpack.docschina.org/configuration/dev-server/#devserverafter
1. 在webpack.config.js中添加如下配置即可
2. 重新启动webpack开发服务器观察效果
