Vue.js -------webpack_yarn webpack-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_76041915/article/details/137292144

1. 能够说出webpack的作用
2. 能够掌握webpack基本配置
3. 能够知道webpack开发服务器运作过程
4. 能够熟练webpack中文文档

一.webpack的作用

webpack的主要作用:

1 . 减少文件数量
2 . 缩减代码体积
3 . 提高浏览器打开的速度

1._webpack基本概述

webpack本质是, 一个第三方模块包, 用于分析, 并打包代码

支持所有类型文件的打包
支持less/sass => css
支持ES6/7/8 => ES5
压缩代码, 提高加载速度

什么是webpack呢? 作用是什么? 目的是?

1. 它是一个模块包 2. 识别代码, 翻译, 压缩, 整合打包 3. 提高打开网站的速度

二.webpack使用步骤

首先要下载yarn命令:

npm install --global yarn

1. 初始化包环境

2. 安装依赖包

yarn add webpack webpack-cli -D

3. 配置scripts (自定义命令)在package.json中修改

使用webpack需要做哪些准备工作?

1. 初始化文件夹包环境, 得到package.json文件

2. 下载webpack等模块包

3. 在package.json自定义命令, 为打包做准备

1.webpack基础使用

需求： 2个js文件 ->打包成1个js文件分析：

①：新建src下的资源
②：add.js – 定义求和函数并导出
③：index.js – 引入add模块并使用函数输出结果
④：执行 `npm run build` 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)
⑤：打包后默认生成dist和main.js, 观察其中代码

webpack如何使用

1. 默认src/index.js – 打包入口文件

2. 需要引入到入口的文件才会参与打包

3. 执行package.json里build命令, 执行webpack打包命令

4. 默认输出dist/main.js的打包结果

2.webpack再次打包

①：src下新建tool/tool.js
②：定义数组求和函数导出 ③：index.js – 引入tool模块的函数并使用, 打印结果
④：执行 `yarn build` 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)
⑤：打包后默认生成dist和main.js, 观察其中代码

代码增加后 , 如何打包呢 ?

1 . 确保在 src/index.js 引入和使用

2 . 重新执行 yarn build 打包命令

三.webpack的配置

1.webpack-入口和出口

配置文档: https://webpack.docschina.org/concepts/#entry

1. 新建webpack.config.js
2. 填入配置
3. 修改入口文件名
4. 打包观察效果

注意: webpack基于node, 所以导出, 遵守CommonJS规范

如何修改webpack入口和出口

1. 新建webpack.config.js (webpack默认配置文件名) 2. 通过entry设置入口文件路径 3. 通过output对象设置出口路径和文件名

2.yarn build执行流程图

重点: 所有要被打包的资源都要跟入口产生直接/间接的引用关系

执行webpack命令, 找到配置文件, 入口和依赖关系, 打包代码输出到指定位置

3.案例-隔行变色

webpack打包代码, jquery实现功能

需求：新建项目, yarn下载jquery, 然后模块化引入到js中, 编写jq代码实现隔行变色

步骤：

①：从0准备环境, 初始化包环境, 下载webpack和webpack-cli包, 配置自定义命令build
②：yarn下载jquery, 新建public/index.html,准备一些li标签
③：src/main.js 引入jquery, 编写功能代码
④：执行打包命令
⑤：复制public/index.html到dist/, 然后引入打包后的js, 运行网页观察效果
在index.html文件中引入打包的js

用 yarn 下的包 , 如何作用在前端项目中?

1 .借助webpack, 把模块和代码打包

2 . 把js文件引入到html执行查看效果

4.html-webpack-plugin插件

配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/

1. 下载插件

2. webpack.config.js添加配置

在重新创建项目的时候，一定要把之前需要的配置重新安装一下，以下错误的原因是没有重新下载jquery.

重要: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活

5.webpack打包css文件

目标：编写css代码, 让webpack打包

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

报错: 因为webpack默认只能处理js文件

6.webpack-使用加载器

css-loader 文档: https://webpack.docschina.org/loaders/css-loader/

style-loader文档: https://webpack.docschina.org/loaders/style-loader/

css-loader 让webpack能处理css类型文件 style-loader 把css插入到DOM中

1. 下载加载器
2. webpack.config.js配置
3. 打包观察效果

webpack如何支持css打包? 打包后样式在哪里? 如何生效?

1. 依赖css-loader和style-loader

2. css代码被打包进js文件中

3. style-loader会把css代码插入到head下style标签内

7.webpack处理less文件

less-loader文档:https://webpack.docschina.org/loaders/less-loader/

less-loader作用: 识别less文件

less 作用: 将less编译为css

1. 新建src/less/index.less – 设置li字体大小
2. 把index.less引入到入口处
3. 下载加载器来处理less文件
4. webpack.config.js针对less配置
5. 打包观察效果

webpack如何支持less打包? 需要注意什么?

1. 依赖less-loader和less模块包

2. 转换css后还需要css-loader和style-loader的处理

8.webpack处理图片文件

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

报错: 因为webpack无法自己处理图片文件

webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader

文档: https://webpack.docschina.org/guides/asset-modules/

以前用url-loader和file-loader来处理

现在webpack.config.js – 针对图片文件设置type: “assets“ 再次打包观察效果小于8KB文件, 文件转base64打包在js中, 大于8KB, 文件自动命名输出到dist下, 打包观察效果和2图区别

在webpack.config.js添加配置，

下载file-loader包

运行npm run build

webpack如何支持图片打包? 对图片有哪2种处理方案?

1. webpack5, 在rules里, 针对图片文件设置type: asset

2. 小于8KB转base64字符串进js里, 大于8KB输出文件

9.webpack加载文件优缺点

图片翻译成了base64, 放到了js文件中

好处: 浏览器不用发请求了，直接可以读取, 速度快
坏处: 图片太大，再转`base64`就会让图片的体积增大 30% 左右, 得不偿失

图片转base64打包进js中好处和坏处是什么?

1. 好处是减少浏览器发送的请求次数, 读取图片速度快

2. 坏处是图片过大, 转base64占空间会多30%左右

10.webpack处理字体图标

在创建项目的时候需要安装以下模块

首先创建项目框架 
yarn init

webpack包
yarn add webpack  webpack-cli  -D

html-webpack-plugin包
yarn add html-webpack-plugin -D

less模块
npm install less less-loader --save-dev

less-loader模块
yarn add less-loader less -D

css模块和style模块
npm install --save-dev style-loader css-loader

jquery模块
yarn add jquery

file-loader模块
npm install file-loader --save-dev

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

webpack如何处理图标字体文件呢?

1. 在webpack.configjs的rules里针对字体图标文件类型

设置asset/resource, 直接输出到dist下

11.webpack对JS语法降级

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. 下载加载器
3. 配置到webpack.config.js上
4. 打包观察是否降级

webpack如何帮助我们降低js版本语法的呢?

1. 借助babel-loader和babel编译器, 给webpack配置上

webpack开发服务器

1.webpack开发服务器

问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s) 原因:

从0构建依赖
磁盘读取对应的文件到内存, webpack开始加载
再用对应的 loader 进行处理
将处理完的内容, 输出到磁盘指定目录

解决: 起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

总结: webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示

2.webpack-dev-server模块使用

webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/

1. 下载模块包
2. 自定义webpack开发服务器启动命令serve – 在package.json里
需要在webpack.config.js配置文件中，添加如下内容
3. 启动当前工程里的webpack开发服务器
4. 重新编写代码, 观察控制台和浏览器是否自动打包和更新

如何使用webpack开发服务器实时打包我们代码呢?

1. 确保下载了webpack-dev-server到工程中 2. 在package.json-配置自定义命令, 然后启动即可 3. webpack-dev-server会给我们一个地址+端口浏览器

访问即可看到在内存中打包的index.html页面