07.webpack5搭建Vue环境

1.webpack打包其他资源

webpack打包图片
处理jpg\png等格式的图片对应的loader是:file-loader
下载file-loader
npm install file-loader -D

设置图片打包后的路径和名称:

{
				test: /\.(png|jpg|jpeg|gif|svg)$/,
				use : {
					loader : "file-loader" ,
					options : {
						// outputPath : "img",
						name : "img/[name]_[hash:6].[ext]"
					}
				}
			}
1
2
3
4
5
6
7
8
9
10

url-loader
可以将较小的文件(图片)转换成base64的URI,减少浏览器向服务器请求的次数.
安装url-loader:npm install url-loader -D

{
				test: /\.(png|jpg|jpeg|gif|svg)$/,
				use : {
					loader : "url-loader" ,
					options : {
						// outputPath : "img",
						name : "img/[name]_[hash:6].[ext]",
						// 图片大小小于100kb打包
						limit : 100 * 1024
					}
				}
			}
1
2
3
4
5
6
7
8
9
10
11
12

url-loader可以替换file-loader.

2.认识asset modular type

webpack5之前加载资源需要用到一些loader;webpack5之后可以直接使用资源模块类型(asset modular type)代替loader.

• asset/resource: 对应之前的file-loader,发送一个单独的文件并导出
• asset/inline :对应url-loader,导出一个资源的data URI
• asset-source :对应raw-loader,导出资源的源代码.
• asset :在导出一个data URI和发送一个单独的文件之间自动选择,配置资源的体积限制.

{
				test: /\.(png|jpg|jpeg|gif|svg)$/,
				type : "asset",
				generator :{
					filename :"img/[name]_[hash:6][ext]",
				},
				parser :{
					dataUrlCondition :{
						maxSize:100 *1024
					}
				}	
			}
1
2
3
4
5
6
7
8
9
10
11
12

打包图片资源
(1)利用file-loader方式

{
				test:/\.(eot|svg|ttf|woff)$/,
				use :{
					loader :"file-loader",
					options :{
						name : "fonts/[name]_[hash:6].[ext]"
					}
				}
			}
1
2
3
4
5
6
7
8
9

(2)利用asset modular type方式

{
				test:/\.(eot|svg|ttf|woff)$/,
				type : "asset/resource",
				generator :{
					filename :"fonts/[name]_[hash:6][ext]"
				}
			}
1
2
3
4
5
6
7

3.认识插件plugin

loader用于特定模块类型进行转换;
plugin用于执行更加广泛的任务,例如打包优化、资源管理、环境变量注入等。

1.CleanwebpackPlugin插件

借助CleanwebpackPlugin插件自动删除dist（build）文件夹。
安装插件 ： npm install clean-webpack-plugin -D
在webpack.config.js中导入插件：

// 导入plugin插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
1
2

使用插件：

plugins :[
		new CleanWebpackPlugin()
	]
1
2
3

2.HtmlWebpackPlugin插件
我们的HTML是在根目录下的，打包的dist（build）文件夹中没有index.html文件的；在进行项目部署时，需要有对应的入口文件index.html，所以也需要对index.html进行打包处理，使用HtmlWebpackPlugin插件。

安装插件 ： npm install html-webpack-plugin -D

// 导入htmlwebpackplugin插件
const HtmlWebpackPlugin =require("html-webpack-plugin");
1
2

plugins :[
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin()
	]
1
2
3
4

3.CopyWebpackPlugin插件
将文件复制到打包的dist（build）文件中
下载：npm install copy-webpack-plugin -D

new CopyWebpackPlugin({
			patterns:[{
				from : "路径",
				to : "./",
				globOptions:{
					// 忽略的文件(不复制)
					ignore:["**/index.html"]
				}
			}]
		})
1
2
3
4
5
6
7
8
9
10

4.Mode配置

// 设置模式
	// development 开发阶段
	// production  准备打包上线的时候
	mode : "development",
	// 设置source-map 建立js映射文件,方便调试代码和错误.
	devtool :"source-map",
1
2
3
4
5
6