webpack基础相关

webpack是什么？
webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件就是编译好的文件，就可以在浏览器端运行了。因为ES6模块划语法浏览器识别不了，所以要使用webpack进行编译，让浏览器认识
webpack输出的文件叫做bundle
功能？
开发模式：仅能编译ES Module语法
生产模式：能编译ES Module语法，还能压缩JS代码
基本使用
根目录下npm init -y 初始化package.json 文件
npm i webpack webpack-cli -D 下载依赖
npx webpack ./src/main.js --mode=development 开发模式下的编译
npm webpack ./src/main.js --mode=production 生产环境下的编译
核心概念
1:entry(入口)
指示webpack从哪个文件开始打包
2:output(输出)
指示webpack打包完的文件输出到哪里去，如何命名等
3:loader(加载器)
webpack本身只能处理js,json等资源，其他资源需要借助loader
4:plugins(插件)
扩展webpack的功能
5:模式
开发模式：development
生产模式：production
开发模式下webpack主要做了什么？
1:编译代码，使浏览器能够识别运行
2:代码质量检查，树立代码规范
loader
1:处理样式资源
npm install xxx-loader -D (可在webpack官网查询，针对css/sass/less的解决方案)

module:{
		rules:[
			//loader的配置
			{
				test:/\.css$/,//只检测xxx文件
				use:[ //执行顺序是从下往上执行
					'style-loader',//将js中css通过创建style标签添加html文件中生效
					'css-loader' //把css资源编译成commonjs的模块到js中
					]
			}
		]
	},

2:处理图片资源
webpack4中处理图片资源通过file-loader和url-loader进行处理
webpack5中已经将两个loader内置到webpack里了，我们只需要简单配置即可处理图片资源
这里在webpack中可以针对小图片进行性能优化配置，将小图片转为base64，减少请求，降低服务器压力

{
				test:/\.(png|jpe?g|svg|gif|webp)$/,
				type:'asset',//转base64
				parser:{
					dataUrlCondition:{
						//小于10M的图片会被转成base64
						//优点：减少请求数量  缺点：体积会变大一点点
						maxSize:10 * 1024
					}
				},
				//图片输出路径
				generator:{
					//输出图片名称
					//[hash:10]可以缩短图片名称的长度，减少打包后的体积，默认是[hash]
					filename:'static/images/[hash:10][ext][query]'
				}
			}

3:自动清空上次打包结果
output中增加clean:true
4:iconfont打包处理

{
				test:/\.(ttf|woff2?)$/,
				type:'asset/resource',//不会被打包成base64
				//图片输出路径
				generator:{
					//输出图标名称
					//[hash:10]可以缩短图标名称的长度，减少打包后的体积，默认是[hash]
					filename:'static/media/[hash:10][ext][query]'
				}
			}

5:js资源打包处理
一：针对js兼容性处理，我们使用babel来完成
babel:javascript编译器。主要用于将ES6语法编写的代码转换为向后兼容的Javascript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
具体配置：
配置文件：babel.config.js
presets:预设配置
@babel/preset-env: 一个智能预设，允许您使用最新的javascript
二：针对代码格式，我们使用Eslint
Eslint:是用来检测js和jsx语法的工具，可以配置各项功能。我们使用Eslint,关键是写Eslint配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检查
6:处理html资源
1:下载包
npm install html-webpack-plugin -D
2: 配置
webpack.config.js中引入html-webpack-plugin ，在plugins中配置

//注意要先引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
		new HtmlWebpackPlugin({
			//模版：以index.html创建新的html文件
			//新的html的特点：1:跟原来的结构一致 2:自动引入打包的资源
			template:path.resolve(__dirname,'index.html')
		})
	],

开发服务器自动化
webpack-dev-server: npx webpack server 自动生成开发服务器，当每次有修改时，实现自动化编译
1:先npm install webpack-dev-server -D 安装
2:再在webpack.config.js文件中配置

//开发服务器：开发模式下不会输出资源，也就是dist目录没有文件输入，他是在内存中编译打包
	devServer:{
		host:'localhost',//服务器域名
		port:3030,//端口号
		open:true,//是否自动打开浏览器
	},

生产模式
生产模式是开发完成代码后，需要将代码部署上线。此模式下我们主要对代码进行优化，让其运行性能更好。
优化的两个角度：
1:优化代码运行性能
2:优化代码打包速度

1:css处理
提取css成单独文件
css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式。这样对于网站来说，会出现闪屏现象，用户体验不好。我们应该是单独的css文件，通过link标签加载性能才好
1:下载包
npm install mini-css-extract-plugin -D
2:配置：
webpack.config.js中
首先引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

修改css loader中style-loader：因为style-loader是将css在打包到js中通过生成style标签引入的，而MiniCssExtractPlugin.loader是单独打包css文件使用link引入的

{
				test:/\.css$/,//只检测xxx文件
				use:[ //执行顺序是从下往上执行
					// 'style-loader',//将js中css通过创建style标签添加html文件中生效
					MiniCssExtractPlugin.loader,
					'css-loader' //把css资源编译成commonjs的模块到js中
					]
			},

在plugins中引入

plugins:[
		new MiniCssExtractPlugin({
			filename:'static/css/main.css'
		})
	],

2:css兼容性处理
解决大多数浏览器css兼容性问题
下载包：
npm install postcss-loader postcss postcss-preset-env -D

webpack.config.js中的配置

{
				test:/\.css$/,//只检测xxx文件
				use:[ //执行顺序是从下往上执行
					// 'style-loader',//将js中css通过创建style标签添加html文件中生效
					MiniCssExtractPlugin.loader,
					'css-loader', //把css资源编译成commonjs的模块到js中
					//写的位置要在css-loader之后，其他特殊css之前，例less-loader/sass-loader
					{
						loader:'postcss-loader',
						options:{
							postcssOptions:{
								plugins:[
									"postcss-preset-env",//能解决大多数样式兼容性问题
								]
							}
						}
					}
					]
			},

package.json中也要对浏览器的兼容程度做配置

"browserslist":[
      "last 2 version",
      "> 1%",
      "not dead"
  ]

3:css压缩
下载依赖包：npm install css-minimizer-webpack-plugin --save-dev
webpack.config.js中引入，plugins中调用构造函数

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
plugins:[
		new CssMinimizerWebpackPlugin()
	],