webpack打包工具

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（自定义命令）

目录的说明

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