webpack打包工具

目录

[1. yarn包管理器](#1. yarn包管理器)

[1.1 yarn 是什么, 有什么用?](#1.1 yarn 是什么, 有什么用?)

[1.2 yarn的使用](#1.2 yarn的使用)

[​​​​​​2. webpack基本概述](#2. webpack基本概述)

[2.1 webpack是什么？](#2.1 webpack是什么？)

[2.2 什么是打包？](#2.2 什么是打包？)

[2.3 webpack能做什么？](#2.3 webpack能做什么？)

[3. webpack基本使用步骤](#3. webpack基本使用步骤)

[3.1 webpack基本使用步骤](#3.1 webpack基本使用步骤)

[3.2 package.json 中 scripts 的使用](#3.2 package.json 中 scripts 的使用)

[3.3 webpack的基本配置](#3.3 webpack的基本配置)

[3.4 yarn build执行流程图](#3.4 yarn build执行流程图)

[4. webpack插件和loader](#4. webpack插件和loader)

[4.1 自动生成html - html-webpack-plugin 插件](#4.1 自动生成html - html-webpack-plugin 插件)

[4.2 webpack处理css文件 - css-loader](#4.2 webpack处理css文件 - css-loader)

[4.3 webpack处理 less 文件 - less-loader](#4.3 webpack处理 less 文件 - less-loader)

[4.4 webpack处理图片 - 内置asset模块](#4.4 webpack处理图片 - 内置asset模块)

[4.5 webpack处理字体图标 - 内置asset模块](#4.5 webpack处理字体图标 - 内置asset模块)

[4.6 webpack处理高版本语法 - babel语法降级](#4.6 webpack处理高版本语法 - babel语法降级)

[5. webpack开发服务器配置](#5. webpack开发服务器配置)

[5.1 webpack-开发服务器](#5.1 webpack-开发服务器)

[5.2 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.1webpack是什么？

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基本使用步骤

1. 新建项目文件夹，src/index.js
2. 初始化 yarn init -y
3. 安装依赖 yarn add webpack webpack-cli -D
4. 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打包处理

1. 新建 - src/css/index.css
2. 编写去除li圆点样式代码
3. (重要) 一定要引入到入口才会被webpack打包
4. 执行打包命令观察效果

报错**:因为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.3webpack处理 less 文件 - less-loader

目标：编写 less 代码，让webpack打包处理 less (需要配置 less-loader)
less-loader文档: https://webpack.docschina.org/loaders/less-loader/
配置 less-loader 的步骤：

1. 新建src/less/index.less -- 设置li字体大小
2. 把index.less引入到入口文件
3. 安装依赖 yarn add less less-loader -D
4. 配置内容（针对less配置）
5. 打包观察效果

4.4 webpack处理图片 - 内置asset模块

1. 在src/assets/准备图片文件
2. 在index.less对body设置背景图片
3. 在入口导入图片文件, 设置到img标签插入到body
4. 打包观察效果

报错: 因为webpack无法自己处理图片文件
如果要 解析图片等资源 ，需要用到 webpack 5 内置的 asset 资源处理模块， 已集成，无需安装。
官网地址： https://webpack.docschina.org/guides/asset-modules/
配置 rules 内容：

注意：
（1）对于小于 8k 的图片， 会自动转 base64 字符串 （节约请求次数，成本：放大约30%的图片体积大小）
（2）对于大于 8k 的图片， 会生成单独文件引入 。
配置图片的打包输出目录：
（默认是直接输出到了 dist 根目录, 可以通过 generator 进行配置）

4.5 webpack处理字体图标 - 内置asset模块

1. src/assets 下 放入fonts字体相关文件夹(素材里)
2. src/main.js 引入 assets/fonts/iconfont.css
3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上
4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)
5. 打包后运行网页观察效果

字体图标 和 图片的配置一致，也是用内置的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代码
步骤：

1. 在src/main.js -- 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
2. 安装包：yarn add -D babel-loader @babel/core @babel/preset-env
3. 配置规则

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开发服务器观察效果