07.webpack5-常见的Loaders&Plugins

coderHan_

已于 2022-10-27 09:51:35 修改

阅读量463

点赞数 1

分类专栏： vue3.js 文章标签： webpack javascript 前端

于 2022-10-19 15:55:31 首次发布

本文链接：https://blog.csdn.net/HGJyujian/article/details/127309082

版权

vue3.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.Webpack打包其他资源

1.1 打包图片

使用图片的两种方式:

background-image url模式
img 标签的src

1.2 file-loader

处理jpg、png等格式的图片，我们需要的loader是：file-loader；
file-loader的作用：帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；
jpe?g ？在正则表达式中代表 0个或者1个 ， + 表示1次或者多次， * 表示 0次或者多次；
打包出来的文件(图片)是一个16进制的Hash值；
background:contain; // css中图片适配
img元素的图片使用

在Js代码中创建img标签；
通过使用 img.src = “…/img/picName.png” 给img标签图片路径；
打包出来之后是没有办法正常显示的；
正确使用方法，是将图片作为资源引入，const imgSrc = require(“…/img/picName.png”)
imgEl.src = imgSrc;

通过img元素的图片使用，实际上是template引入图片；
template也会被vue-loader编译；

1.3 文件的命名规则

有时候我们处理后的文件名称按照一定的规则进行显示；
保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等；
这个时候我们可以使用PlaceHolders来完成；
常见的PlaceHolders：

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成一个128的hash值(32个16进制)；
[contentHash]：在file-loader和[hash]结果是一致的；
[hash:]：截取hash的长度，默认32个字符；
[path]：文件相对于webpack配置文件的路径；

{
	test:/.\(jpe?g|png|svg|gif)$/,
	use: [
		{
				loader : "file-loader",
				options: {
						//  这是在打包的文件夹中添加一个img文件夹
						//  后面是命名规则
						name:"img/[name]_[hash:6].[ext]" 
				}
		}
		]
}

1.4 url-loader

url-laoder和file-loader的工作方式是相似的，但是可以将小的文件，转成base64的URL；
将图片编码成base64的URL，浏览器可以直接解析base64；
图片转成base64，实际上是对图片加载时候的一个优化；
判断文件大小，判断多大的文件才被编码成base64：

{
	test:/.\(jpe?g|png|svg|gif)$/,
	use: [
		{
				loader : "url-loader",
				options: {	
						name:"img/[name]_[hash:6].[ext]" 
						// 大于 100M的时候不被打包
						limit: 100 * 1024  // 对应的单位是byte
				}
		}
		]
}

1.5 认识asset module type

我们当前使用的webpack版本是webpack5：

在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader、url-loader、file-loader；
在webpack5开始，我们可以直接使用资源模块类型（asset module type），代替上面的那些loader；

资源模块类型(asset module type)，通过添加4种新的模块类型，来替换所有这些loader：

asset/resource: 发送一个单独的文件并导出URL，之前通过使用file-loader；
asset/inline: 导出一个资源的data URL，之前使用url-loader；
asset/source: 导出资源的源代码，之前使用raw-loader;
asset在导出一个data URL和发送一个单独的文件之间自动选择，之前通过使用url-loader，并且配置资源体积限制实现；

{
		test: /.\(jpe?g|png|svg|gif)$/,
		// 模块类型
		type:"asset",
		generator:{
			// 规定打包之后的名字 后缀名不加 . 
			filename:"img/[name]_[hash:6][ext]"  
			// 也可以在output中编写输出的文件名称
			// assetModuleFilename:"img/[name]_[hash:6][ext]"
		},
		parser: {
			dataUrlCondition: {
			   //  规定是否转为base64编码最大值
 				maxSize: 100 * 1024
			}
		}
}

1.6 加载字体文件

我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文字的处理也是一样；
第一种方式:使用file-lodaer：

{
	test : /.\(eot|ttf|woff2?)$/,
	use : {
		loader : "file-loader",
		options : {
			outputPath : "font",
			filename : "[name]_[hash:6].[ext]",
			// 与以上两句相同效果的用法
			// name : "font/[name]_[hash:6].[ext]" 
		}
	}
}

第二种方式:使用asset/resource：

{
	test : /.\(eot|ttf|woff2?)$/,
	type : "asset/resource",
	generator : {
		filename : "font/[name]_[hash:6][ext]"
	}
}

2.webpack的插件

每次打包的时候都要先删除之前留下的包，比较麻烦；
build文件夹中，缺少index.html作为资源的入口文件;
loader是加载模块的时候使用，自动删除原有包这个操作应该使用Plugin插件；

2.1 认识Plugin

webpack的另一个核心是Plugin；
Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

2.2 CleanWebpackPlugin

每次修改配置，重新打包，都需要手动删除build文件夹，可以通过这个插件来自动删除；
安装命令：npm install clean-webpack-plugin -D
插件的引入

const { CleanWebpackPlugin } = require(“clean-webpack-plugin”);

插件的使用

plugins: [
// 一个个的插件对象
new CleanWebpackPlugin()
]

2.3 HtmlWebpackPlugin

另外还有一个不太规范地方：

我们的HTML文件是编写在根目录下的，而最终打包的build文件夹中是没有index.html文件的；
在进行项目部署的时候，笔谈也是需要有对象的入口文件index.html;
所以我们也需要对index.html进行打包处理；

指定打包之后的html模板；
语法**<% 变量 %>,这个是EJS模块填充数据**的方式；
在配置HtmlWebpackPlugin时，我们可以添加以下配置；

template：指定我们要使用的模块所在的路径；
title：在进行html’WebpackPlugin.options.title读取时，就会读到该信息；

2.4 DefinePlugin

模块中的BASE_URL的常量；
webpack内置的插件，DefinePlugin允许在编译时创建配置的全局常量(不需要单独安装)；

new DefinePlugin({
     BASE_URL:"  './'  "    // 当前路径
 })

2.5 CopyWebpackPlugin

public文件夹中的内容，在打包之后会复制到build文件夹下，其中index.html用来做生成；
将public文件夹下的内容复制到打包之后的文件夹下；

    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",   // 复制的文件夹为public
          to: "./",  // 复制到 当前文件夹(build)
          globOptions: {
            ignore: [
            //  忽略 public下的所有index.html文件
              "**/index.html" 
            ]
          }
        }
      ]
    })