webpack5-基础入门-03-修改打包资源路径处理图片字体资源

最新推荐文章于 2024-05-21 22:42:59 发布

长沙xtt

最新推荐文章于 2024-05-21 22:42:59 发布

阅读量1.1k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_40746230/article/details/125161922

版权

webpack 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.打包路径修改图片路径修改

修改webpack.config.js

//输出
	output: {
		//所有文件输出路径
		//__dirname node.js的变量。代表当前文件的文件夹目录
		path: path.resolve(__dirname, "dist"), //绝对路径
		//入口文件打包输出文件名
		filename: "static/js/main.js"
	},

public/index.html 修改入口文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpack</title>
	</head>
	<body>
		<a>hello world</a>
		<div class="box"></div>
		<div class="box1"></div>
		<div class="box2">less</div>
		<div class="box3">.sass</div>
		<div class="box4">scss</div>
			<div class="box5">styl</div>
		<script src="../dist/static/js/main.js"></script>
	</body>
</html>

修改图片打包路径方式 module ----- rules

filename: "static/imgs/[hash:8][ext][query]",

		{
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
					dataUrlCondition: {
						//- 优点：减少请求数量
                          //缺点：体积变得更大
						maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
					},
				},
				//修改图片路径方式
+               generator: {
 +            // 将图片文件输出到 static/imgs 目录中
  +        // 将图片文件命名 [hash:8][ext][query]
   +       // [hash:8]: hash值取8位
    +      // [ext]: 使用之前的文件扩展名
     +     // [query]: 添加之前的query参数
      +    filename: "static/imgs/[hash:8][ext][query]",
       + },
				
			},

2，自动清空上次打包内容

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
	//自動清空上次打包结果
	//原理:在打包前，将path整个目录内容清空，再进行打包
+	clean:true,
  },

3，处理字体图标资源

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3454567添加购物车引入项目下载图标

引入项目 src->css 引入 iconfont.css

新建fonts目录引入 iconfont.ttf iconfont.woff iconfont.woff2

修改配置 iconfont.css

@font-face {
  font-family: "iconfont"; /* Project id 3454567 */
  src: url('../fonts/iconfont.woff2?t=1654575936349') format('woff2'),
       url('../fonts/iconfont.woff?t=1654575936349') format('woff'),
       url('../fonts/iconfont.ttf?t=1654575936349') format('truetype');
}

main.js 引入目录 import "./css/iconfont.css";

	//  修改webpack.config.js 

 //配置字体
	  {
	    test: /\.(ttf|woff2?)$/,
	    type: "asset/resource",
	    generator: {
	      filename: "static/media/[hash:8][ext][query]",
	    },
	  },

添加图标代码 index.html





打包 npx webpack

4.处理其他资源：视频

{
   test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
   type: "asset/resource",
   generator: {
   filename: "static/media/[hash:8][ext][query]",
   },
   },