webpack一些理解

webpack

它是一个静态模块打包器，当webpack处理应用程序的时候，它会递归的构建应用中的各个模块的依赖关系，形成一个依赖关系图，然后将所有模块打包成一个或多个bundle
它会根据主入口配置，从主入口出发，识别代码中所有的导入语句，递归的找出所有依赖，将入口和其依赖打包到一个单独的文件中 默认支持js、json文件， 支持COMMON esmodel AMD等模块类型

核心概念

chunk

代码块，一个chunk可能由多个模块组成，可以理解为主入口文件，其他依赖资源为module

bundle

经webpack流程解析后最终输出的结果 包

loader

默认情况下只支持js 、json文件类型，通过loader，可以让wabpack解析其他类型的文件，有多个loader是自后往前，自下从上执行
loader本质上就是一个函数（最好别是箭头函数，因为需要继承外部loader的this，获取相关api）且必须有返回值（字符串或者buffer）

// 常⻅的loader
style-loader
css-loader
less-loader
sass-loader
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法
file-loader//处理图⽚⼦图
eslint-loader

plugin

对webpack的功能进行补充，插件，在某个时刻，帮助我们处理一些事情的机制 plugin
本质也是执行特定功能任务的一个类（里面包含一个apply函数，接受一个参数，compiler），在webpack编译过程中，会触发一系列的钩子事件，插件做的就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，当构建的时候，插件注册的事件也会随钩子的触发而执行

moudle

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找 出所有依赖的模块。
当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。

module:{
	 rules:[
		 {
			 test:/\.xxx$/,//指定匹配规则
			 use:{
			 	loader: 'xxx-load'//指定使⽤的loader
			 }
		 }
	 ]
}

--------多个loader------
rules:[
		 {
			 test:/\.xxx$/,//指定匹配规则
			 use: ["style-loader", "css-loader"]
		 }
	 ]
---如果loader存在配置---
	 rules:[
		 {
			 test:/\.xxx$/,//指定匹配规则
			 use:{
			 	loader: 'xxx-load',//指定使⽤的loader
			 	options: {
			 		***: ***, // 一些自配置信息
			 	}
			 }
		 }
	 ]

entry

入口起点配置，以哪个文件作为构建依赖图的起点

//单⼊⼝ SPA，本质是个字符串
entry:{
 main: './src/index.js'
}


==相当于简写===
entry:"./src/index.js"
//多⼊⼝ entry是个对象
entry:{
 index:"./src/index.js",
 login:"./src/login.js"
}

output

输出配置，包含输出文件名 位置信息

output: {
 filename: "bundle.js",//输出⽂件的名称
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},
 
//多⼊⼝的处理
output: {
 filename: "[name][chunkhash:8].js",//利⽤占位符，⽂件名称不要重复
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必须是绝对路径
},

mode

⽤来指定当前的构建环境
production
development
none
设置mode可以⾃动触发webpack内置的函数，达到优化的效果
开发阶段的开启会有利于热更新的处理，识别哪个模块变化
⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能

可以简单理解为：一个bundle对应一个chunk对应一个module或者多个module（一般情况下）

webpack文件的指纹策略

• hash
  是以项目为单位的， 当项目内容文件发生改变后才会重新生成新得hash，否则不变
• chunkhash
  是以chunk为单位，当一个文件内容发生改变，则整个chunk组的模块hash都会改变，（连坐关系）
• contenthash
  是以当前文件自身内容为单位，当自身变化后，本身hash会变化，不会影响其他文件