2、webpack配置文件之—打包各种资源及文件

从这里开始就要写webpack配置文件了

项目目录下创建webpack.config.js文件（运行webpack指令时会加载该文件的webpack配置）

//resolve用来拼接绝对路径，path自带的momodules
const {resolve} = require('path')
module.exports = {
	//webpack配置
	//入口文件
	entry: "./src/index.js",
	//输出
	output: {
		// 文件名
		filename:"****.js",
		// 输出路径,__dirname当前文件目录的绝对路径
		path:resolve(__dirname,'****'),
	},
	//loader配置（打包各种资源及文件）
	module:{
		// 详细的loader配置
		rules:[]
	},
	// plugins配置
	plugins:{
		
	},
	// mode模式
	mode:""
}

以上就是基础结构，接下来会细写每个loader和plugins，就不每次都写一次，只写该功能部分
注意注意：loader和plugins里面的每个功能是有书写顺序的，下个例子再解释一下

---

1、打包样式（css\less\sass）资源

看use数组中的每个loader的执行顺序是从右到左，从上到下依次执行的，因为每个loader的作用是不同的，所以要有顺序区分。

module:{
	rules: [
		{
			// 匹配哪些文件(这里以.css结尾的文件)
			test: /\.css$/,
			// 使用哪些loader处理
			use[
				//创建style标签，将上个loader(css-loader)生成的在js中的样式资源（字符串）添加到html中的head标签中生效
				// 是不是觉得不好，常规都是一个样式表文件，这里怎么就加到html里的style标签里了，别着急，后边继续优化
				'style-loader',
				// 将css文件变成commonjs模块加在js中，里面内容是样式字符串。为啥要变css文件呢，还是那个问题，webpack只认识js和json
				'css-loader',
			]
		}
	]
}

不知道大家有没有发现，这个匹配css结尾的难道只能处理css文件吗，没错，他只能处理.css文件，如果使用了css预编译器，less/sass之类的，还需要其他的loader。简而言之，不同的文件必须配置不同的loader进行处理。

ok，接下来看一下less文件的loader

module:{
	rules: [
		{
			// 匹配哪些文件(这里以.css结尾的文件)
			test: /\.less$/,
			// 使用哪些loader处理
			use[
				'style-loader',
				'css-loader',
				// 将less文件编译成css文件
				// 需要下载less-loader和less：npm i less -D
				'less-loader'
			]
		}
	]
}

到这里大家应该也能看出来顺序的问题了吧

---

2、打包HTML资源

这里说个知识点，上个例子（less）的loader:less-loader是需要npm下载的对不，所以：

1. 有些loader是需要下载的
2. 同理plugins有些也是需要下载的，不同的是，loader直接配置使用即可，plugins需要先引入一下在进行配置

---

这里的打包HTML就是用到了一个插件：html-webpack-plugin，让我们先下载一下npm i html-webpack-plugin -D

// 这个引入是写在module.exports外边的哟，可以看最本文最上边那个
const {HtmlWebpackPlugin} = require('html-webpack-plugin')
plugins:[
	// html-webpack-plugin(需要先引入哦)
	// 该插件功能：创建一个空的HTML,自动引入打包输出的所有资源（js/css）
	new HtmlWebpackPlugin()
	// 上文说了，空的html，那我在html自己写的那些内容怎么办，来了⬇️（上边的new的就删掉就行了）
	new HtmlWebpackPlugin({
		// 复制 './src/index.html'文件，
		template: './src/index.html'
	})
]

---

3、打包图片资源

这里也说一下哦，加载图片有两种，一种是在样式表里添加，一种是在html里面添加。

module:{
	rules: [
		{
			test: /\.(jpg|png|gif)$/,
			// 记不记得处理样式的loader用了好多个，那就使用了use数组
			// 那如果只需要一个loader呢，并且，这些loader有没有配置选项供我们选择呢？来了⬇️
			loader:'url-loader',
			// 这里就是一些配置哦
			options: {
				// 这个limit有意思，一般来说，打包图片，我们就会把图片文件打包到我们的输出目录下边
				//但是，如果有一些特别小的图片（小于8*1204=8kb），我们就可以不打包这个图片输出目录下边，直接让它以base64格式现实
				// 优点：减少请求数量，减轻服务器压力
				// 缺点：图片体积会更大，文件请求速度更慢
				limit: 8*1024
			}
		}
	]
}

注意：不说是不是就忘了，loader一般都需要下载的，这里就是：npm i url-loader file-loader -D 两个哦，不要问我怎么知道的，看视频里说的。

---

嘻嘻，还记得不，一开始说了图片加载有两种，按照上文的loader发现，css里的图片没问题，但是加载html里的图片不行了。
为啥呢，举个例子：html和css里都引入了一个文件：./images/a.jpg，但是啊，webpack打包完，图片的名字就会加上hash给改了，变成了（一串很长的字母.jpg），相对应的css引入的路径可以变成一长串字母的图片路径，但html没有啊，所以html的图片就加载不出来了。所以还需要额外的写一个loader

module:{
	rules: [
		{
			test: /\.html$/,
			// 负责处理html文件的img图片（负责引入从而能被url-loader进行处理）
			loader:'html-loader'
		}
	]
}

注意：别忘了 npm i html-loader -D 哦
再注意：看这个loader的注释，“从而能被url-loader进行处理”，什么意思呢，就说html-loader的处理要在url-loader前边哦，所以说，html-loader要写在url-loader下边哟

---

新问题来了，这么写完发现没用呀，发现html里的图片路径是个不知道的什么东西，原因：url-loader默认使用的是es6模块解析的，而html-loader引入图片是commonjs，所以要把url-loader也改成commonjs解析，为啥不能改html-loader是es6，我也不知道，可能是他不厉害吧。写法见⬇️

// 这里是url-loader的配置项哦(见上文)，其他的就不写了
options: {
	limit: 8*1024,
	// 就是它，关闭esmodule,开启commonjs
	esModule:false
}

嘻嘻，然后就发现，html里的图片就变成了一长串的字母.jpg，新需求来了，能不能让它短点呀，太长了。okk⬇️

options: {
	limit: 8*1024,
	esModule:false,
	// 给图片进行重命名,[hash:n]取图片的hash的前n位，[ext]取文件原来的扩展名
	name:'[hash:n].[ext]'
}

---

4、打包其他资源

都有啥其他资源呢？— 字体文件

module:{
	rules: [
		// 打包其他资源（除了html/js/css）（如果有less也要把less去掉哦）
		{
			// 这里就不是test文件了，是exclude(不包含)
			exclude: /\.(css|js|html|less)$/,
			loader:'file-loader',
			// 是不是觉得file-loader很眼熟，没错，他在打包图片资源里也用到了
			options: {
				name:'[hash:n].[ext]'
			}
		}
	]
}

end