【Webpack】webpack的基础使用详细总结上（建议收藏）

【Webpack】webpack的基础使用详细总结上（建议收藏）
1- 前言（前端工程化）

实际的前端开发：
- 模块化（js 的模块化、css 的模块化、其它资源的模块化
- 组件化（复用现有的 UI 结构、样式、行为）
- 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
- 自动化（自动化构建、自动部署、自动化测试）
什么是前端工程化：

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

最终落实到细节上，就是实现前端的“4 个现代化”：模块化、组件化、规范化、自动化

前端工程化的好处：
前端工程化的好处主要体现在如下两方面：
1. 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面
2. 最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本
2- 介绍

 2.1 概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

更多详细了解，可以去webpack官网
总结：
1. webpack是一个前端打包工具
2. 用来处理现代前端错综复杂的依赖关系（A插件需要B插件，B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
3. Vue前期脚手架就是用 webpack制作（Vue开始推荐用vite构建工具（更快））、react脚手架、angular等现代框架脚手架都是依赖webpack
2.2 主要功能

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

2.3 好处

让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的。

3- 安装
- 在项目中安装 webpack，新建一个mywebpack文件夹，用来介绍webpack的基础使用
- 在终端运行如下的命令，安装 webpack 相关的两个包：npm i webpack webpack-cli -D
- 新建 dist 、public、src 三个文件夹
4- 配置webpack

4.0 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会 先读取这个配置文件，从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是 基于 node.js 开发出来的 打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

4.1 核心概念

4.1.1 入口 entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置entry属性，来指定一个（或多个）不同的入口起点。例如：
- webpack.config.js
```
module.exports = {
	// 入口
	// entry:'./src/index.js',
	entry:{
		"vue":"./src/main.js",
		"base":"./src/index.js"
	},
};
1
2
3
4
5
6
7
8
```
4.1.2 出口 output

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
- webpack.config.js
```
const path = require('path');

module.exports = {
	// 入口
	// entry:'./src/index.js',
	entry:{
		"vue":"./src/main.js",
		"base":"./src/index.js"
	},
 	// 输出
	output:{
		// 路径，__dirname 当前目录
		path:__dirname+"/dist",
		// 文件名称
		filename:'[name]-[hash:7].js'
	},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
4.1.3 模式 mode

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
mode 节点的可选值有两个，分别是：
- development
  开发环境、
  不会对打包生成的文件进行代码压缩和性能优化、打包速度快，
  适合在开发阶段使用
- production
  生产环境
  会对打包生成的文件进行代码压缩和性能优化
  打包速度很慢，仅适合在项目发布阶段使用
- webpack.config.js
```
module.exports = {
  mode: 'production',
};
1
2
3
```
4.2 在项目中配置 webpack
1. 在项目根目录中，创建名为 webpack.config.js 的 webpack配置文件
1. 在 package.json 的 scripts 节点下，新增 serve 脚本如下：
1. 在终端中运行 npm run serve 命令，启动 webpack 进行项目的打包构建。
5- loader

5.1 概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。

5.2 CSS处理器

5.2.1 概述

css-loader 分析css关系-合并一个css（import）

作用：css-loader处理 .css 文件 style-loader把css加载到style 标签内

5.2.2 安装

运行如下的命令，即可在项目中安装此插件：
```
npm i css-loader style-loader -D
1
```
5.2.3 配置

在 webpack.config.js 写以下代码：
```
var HtmlWebpackPlugin = require('html-webpack-plugin'); //导入插件


module.exports = {
	module: {
		rules: [
			/* loader css-loader 让webpack拥有处理css的能力
			   遇到.css 结尾的文件都使用 这两个loader 处理
			 */
			{
				test: /\.css$/,
				use: ["style-loader", "css-loader"]
			},
		]
	},
}	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
5.3 图片与文件处理

file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件

url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)

image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积

html-loader html 代码里处理 img 标签的 loader。

5.3.1 安装

运行如下的命令，即可在项目中安装此插件：
```
npm i file-loader url-loader -D
1
```
5.3.2 配置

在 webpack.config.js 写以下代码：
```
var HtmlWebpackPlugin = require('html-webpack-plugin'); //导入插件


module.exports = {
	module: {
		rules: [
			/* loader css-loader 让webpack拥有处理css的能力
			   遇到.css 结尾的文件都使用 这两个loader 处理
			 */
			{
				test: /\.(png|jpeg|jpg|gif|svg|webp|ico|jfif)/,
				use:[{
					loader:"url-loader", //使用url加载器
					options:{
						limit:50000,//当文件小于50000字节 转换为base64格式（减少http请求次数）
						name:'images/[name].[ext]'  //[name]名称  [ext]后缀名
					}
				}]
			}
		]
	},
}	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
```
5.3 两个案例

1.处理图片
- 在index.js 写
- 运行结果
注意：不需要再次配置
- 导入css
2. 处理图标
- 创建图标
6- plugin

6.1 webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。

注意： webpack-dev-server 会启动一个实时打包的 http 服务器

常用webpack 插件有如下：
- webpack-dev-server
  - 每当修改了源代码，webpack 会自动进行项目的打包和构建
- html-webpack-plugin
  - 可以通过此插件自定制 index.html 页面的内容
- clean-webpack-plugin
  - 清零dist 目录，执行npm run build 需要清理上一次生成的内容
6.2 webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

6.2.1 安装

运行如下的命令，即可在项目中安装此插件：
```
npm i webpack-dev-server -D
1
```
6.2.2 配置webpack.config.js

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：
```
module.exports = {
	devServer: {
		proxy: {}, //代理
		host: "localhost", //域名
		port: 8080, //端口号
		hot: true, //热更新（文件保存，网页自动更新）
		open: true, //自动打开浏览器
	},
}	
1
2
3
4
5
6
7
8
9
```
6.2.3 修改package.json

修改 package.json -> scripts 中的 serve 命令如下：
```
	"scripts": {
		"build": "webpack",
		"serve": "webpack serve",
	},
1
2
3
4
```
运行 npm run build 命令，重新进行项目的打包

然后就可以npm run serve 运行项目，会自动跳转到浏览器，查看自动打包效果

 6.3 html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

作用：生成 html模板文件 ，自动把打包好的js插入到模板

6.3.1 安装 html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：
```
npm i html-webpack-plugin -D
1
```
6.3.2 配置 html-webpack-plugin

在 webpack.config.js 写以下代码：
```
var HtmlWebpackPlugin = require('html-webpack-plugin'); //导入插件


module.exports = {
	plugins: [
		/* 把template 文件拷贝到dist目录并插入打包的js(main.js) */
		new HtmlWebpackPlugin({
			template: './public/index.html'
		})
	],
}	
1
2
3
4
5
6
7
8
9
10
11
```
6.4 clean-webpack-plugin

6.4.1 安装

运行如下的命令，即可在项目中安装此插件：
```
npm i clean-webpack-plugin -D
1
```
6.4.2 配置

在 webpack.config.js 写以下代码：
```
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
		plugins: [
		/* 把template 文件拷贝到dist目录并插入打包的js(main.js) */
		new HtmlWebpackPlugin({
			template: './public/index.html'
		}),
		//实例化好清理dist
		new CleanWebpackPlugin()
	],
}	
1
2
3
4
5
6
7
8
9
10
11
12
13
```
6.4.3 作用

作用：清零dist 目录，执行npm run build 需要清理上一次生成的内容。

7- 特殊标识

[hash] 把内容通过 hash 算法算出来的一串字符
- [hash:7] 取hash 字符串前7个
[name] 原文件名称

[ext] 文件的后缀名

…

还有一部分，明天总结~
相关阅读:
08. Java内存模型(JMM)
【数据结构——单链表】本篇文章通过图文结合的方式能让你轻松的掌握单链表
 如何实施组织的 360 度反馈计划
一行配置解决Spring Boot项目的log4j2核弹漏洞
 德语B级SampleAcademy
实验6.1 python文件应用
 深入 x64
【vue2高德地图api】02-npm引入插件，在页面中展示效果
 痛定思痛学DP，动态规划的一般性应用流程的总结
 java基础
原文地址：https://blog.csdn.net/qq_59012240/article/details/127980314

【Webpack】webpack的基础使用详细总结 上（建议收藏）

1- 前言（前端工程化）

2- 介绍

2.1 概念

2.2 主要功能

2.3 好处

3- 安装

4- 配置webpack

4.0 webpack.config.js 文件的作用

4.1 核心概念

4.1.1 入口 entry

4.1.2 出口 output

4.1.3 模式 mode

4.2 在项目中配置 webpack

5- loader

5.1 概述

5.2 CSS处理器

5.2.1 概述

5.2.2 安装

5.2.3 配置

5.3 图片与文件处理

5.3.1 安装

5.3.2 配置

5.3 两个案例

6- plugin

6.1 webpack 插件的作用

6.2 webpack-dev-server

6.2.1 安装

6.2.2 配置webpack.config.js

6.2.3 修改package.json

6.3 html-webpack-plugin

6.3.1 安装 html-webpack-plugin

6.3.2 配置 html-webpack-plugin

6.4 clean-webpack-plugin

6.4.1 安装

6.4.2 配置

6.4.3 作用

7- 特殊标识