目录
◆ 前端工程化
◆ webpack 的基本使用
◆ webpack 中的插件
◆ webpack 中的 loader
◆ 打包发布
◆ Source Map
一 前端工程化
- 小白眼中的前端开发 vs 实际的前端开发
layui: https://layui.gitee.io/v2/docs/element/nav.html
- 什么是前端工程化
- 前端工程化的解决方案
早期的前端工程化解决方案：
⚫ grunt（ https://www.gruntjs.net/ ）
⚫ gulp（ https://www.gulpjs.com.cn/ ）
目前主流的前端工程化解决方案：
⚫ webpack（ https://www.webpackjs.com/ ）
⚫ parcel（ https://zh.parceljs.org/ ）// 开发第三方包用的多
二 webpack 的基本使用
- 什么是 webpack
- 创建列表隔行变色项目
- 在项目中安装 webpack
- 在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
- 在项目中配置 webpack
- 4.1 mode 的可选值
- 4.2 webpack.config.js 文件的作用
- 4.3 webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
- 4.4 自定义打包的入口与出口
三 webpack 中的插件
- webpack 插件的作用
- webpack-dev-server
webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
- 2.1 安装 webpack-dev-server
运行如下的命令，即可在项目中安装此插件：
npm install webpack-dev-server@3.11.2 -D
-
2.2 配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：
② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：webpack-dev-server 会启动一个实时打包的 http 服务器
2.3 打包生成的文件哪儿去了？
① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
⚫ 严格遵守开发者在 webpack.config.js 中指定配置
⚫ 根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
⚫ 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
⚫ 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多2.4 生成到内存中的文件该如何访问？
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
⚫ 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
- html-webpack-plugin
html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！
3.1 安装 html-webpack-plugin
运行如下的命令，即可在项目中安装此插件：
npm install html-webpack-plugin@5.3.2 -D3.2 配置 html-webpack-plugin
- 3.3 解惑 html-webpack-plugin
① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件
- devServer 节点
在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，
示例代码如下：
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服
务器，否则最新的配置文件无法生效！
四 webpack 中的 loader
- loader 概述
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，
webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
⚫ css-loader 可以打包处理 .css 相关的文件
⚫ less-loader 可以打包处理 .less 相关的文件
⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
- loader 的调用过程
- 打包处理 css 文件
① 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
⚫ use 数组中指定的 loader 顺序是固定的
⚫ 多个 loader 的调用顺序是：从后往前调用
- 打包处理 less 文件
① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
- 打包处理样式表中与 url 路径相关的文件
① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
其中 ? 之后的是 loader 的参数项：
⚫ limit 用来指定图片的大小，单位是字节（byte）
⚫ 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
- 打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借
助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：
- 6.1 安装 babel-loader 相关的包
运行如下的命令安装对应的依赖包：
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
- 6.2 配置 babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
五 打包发布
- 为什么要打包发布
- 配置 webpack 的打包发布
- 把 JavaScript 文件统一生成到 js 目录中
- 把图片文件统一生成到 image 目录中
- 自动清理 dist 目录下的旧文件
六 Source Map
- 生产环境遇到的问题
前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的
加载效率。此时就不可避免的产生了另一个问题：
对压缩混淆之后的代码除错（debug）是一件极其困难的事情
- 什么是 Source Map
Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
- webpack 开发环境下的 Source Map
-
3.1 默认 Source Map 的问题
3.2 解决默认 Source Map 的问题
- webpack 生产环境下的 Source Map
- 4.1 只定位行数不暴露源码
-
4.2 定位行数且暴露源码
- Source Map 的最佳实践
---------------------------------
实际开发中需要自己配置 webpack 吗？
