前端工程化以及构建工具webpack,vite的使用

1.前端工程化

1.1 在实际的前端开发中需要做到的几点：

（1）模块化（js 的模块化、css 的模块化、资源的模块化）
（2）组件化（复用现有的 UI 结构、样式、行为）
（3）规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
（4）自动化（自动化构建、自动部署、自动化测试）

1.2. 什么是前端工程化

（1）前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
（2）企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。
（3）好处：前端开发自成体系，有一套标准的开发方案和流程。
目前主流的前端工程化解决方案：
①webpack（ https://www.webpackjs.com/ ）
②parcel（ https://zh.parceljs.org/ ）
③vite

2.构建工具

（1）当我们习惯了在node中编写代码的方式后，再回到编写html、css、js这些东西会感到各种的不便。比如：不能放心的使用模块化规范(会出现旧版本的浏览器兼容性问题)，既使可以使用模块化规范也会面临模块过多时的加载问题
（2）我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来既解决了兼容性问题，又解决了模块过多的问题。
（3）构建工具就起到了这样一个作用，通过构建工具可以将ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持此代码

2.1 WebPack

2.1.1 什么是 webpack

（1）概念：webpack 是前端项目工程化的具体解决方案。
（2）主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性(使浏览器可以识别高级语法)、性能优化等强大的功能。
（3）好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
（4）注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

2.1.2 webpack 的基本使用

2.1.2.1 在终端运行如下的命令，安装 webpack 相关的两个包：

（1）安装包：
npm install webpack@5.42.1 webpack-cli@4.10.0 -D
①webpack是核心②webpack-cli是webpack命令行工具
（2）注意：
①-S是 --save 的缩写，把包记录到"devDependencies"节点下
②-D是 --save-dev 的缩写

2.1.2.2 在项目中配置 webpack

（1） 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
//mode用来指定构建模式。 
  mode: 'development',
};

（2）webpack命令用于打包，也可以在 package.json 的 scripts 节点下，新增 dev 脚本如下：

（3）在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
补充：
** mode 的可选值**
① development
⚫ 开发环境
⚫ 不会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度快，适合在开发阶段使用
② production
⚫ 生产环境
⚫ 会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度很慢，仅适合在项目发布阶段使用
webpack.config.js 文件的作用
webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置

2.1.2.3 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：
（1）在我们运行npm run dev 时，要确保有src->index.js，否则会报错；dist->main.js可以不管，会自动生成
（2)可以在 webpack.config.js 中修改打包的默认约定

2.1.2.4 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：

补充：

entry: ["./src/a.js","./src/b.js"] //打包两个文件
entry: {  // a.js打包后生成hello.js，b.js打包后生成b.js
	hello："./src/a.js",
	b: "./src/b.js"
}
output: {
	clean:true //下次打包前自动清理上次打包目录
}

2.1.2.5 loader

（1）webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader
（2）以css为例：
使用style-loader,css-loader可以处理js中的样式
使用步骤：
①安装：
yarn add css-loader -D
yarn add style-loader -D
②webpack.config.js配置：

module: { //module配置的就是loader
	rules:[
		{
			test: /\.css$/i, //处理css结尾的文件
			use: ["style-loader","css-loader"] //处理css文件用的是css-loader
		}
	]
}

2.1.2.6 babel

（1）在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性
（2）但是我们现在希望能够使用新特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转为旧代码
（3）babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性
（4）我们如果希望在webpack中支持babel，则需要向webpack中引入babel的loader
（5）使用步骤：
①安装：npm install -D babel-loader @babel/core @babel/preset-env
②配置：

module: {
  rules: [
	{
	  test: /\.m?js$/,
	  exclude: /(node_modules|bower_components)/,
	  use: {
		loader: 'babel-loader',
		options: {
			presets: ['@babel/preset-env']
		} } } ] }

③在package.json中设置兼容列表

 "browserslist": [
    "defaults" // 默认配置，相当于 > 0.5%, last 2 versions, Firefox ESR, not dead
  ]

2.1.3 webpack 中的插件

（1）webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的
webpack 插件有如下两个：
① webpack-dev-server
⚫ 类似于 node.js 阶段用到的 nodemon 工具
⚫ 每当修改了源代码，webpack 会自动进行项目的打包和构建(dist目录需要还是需要使用webpack命令)
⚫以开发服务器形式打开
② html-webpack-plugin
⚫ webpack 中的 HTML 插件（类似于一个模板引擎插件）
⚫ 可以通过此插件自定制 index.html 页面的内容
⚫ 这个插件可以在打包代码后，自动在打包目录生成HTML页面
（2）安装 webpack-dev-server
运行如下的命令，即可在项目中安装此插件：
npm install webpack-dev-server@3.11.2 -D
（3）配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：

② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
（4）打包生成的文件哪儿去了？
① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
⚫ 严格遵守开发者在 webpack.config.js 中指定配置
⚫ 根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
⚫ 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
⚫ 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
（5）生成到内存中的文件该如何访问？
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
⚫ 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
（6）html-webpack-plugin
①html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！
②运行如下的命令，即可在项目中安装此插件：
npm install html-webpack-plugin@5.3.2 -D
③配置 html-webpack-plugin

2.2 vite

2.2.1 vite简介

（1）Vite也是前端的构建工具
（2）相较于webpack，Vite采用了不同的运行方式：
①开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
②在项目部署时，再对项目进行打包
（3）除了速度外，vite使用起来也更加方便

2.2.2 vite的基本使用

（1）安装开发依赖vite
yarn add -D vite
（2）vite的源码目录就是项目根目录
（3）开发命令
①vite：启动开发服务器
②vite build：打包代码
③vite preview：预览打包后的代码
（4）使用命令构建
①npm create vite@latest
②yarn create vite
③pnpm create vite