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

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

    修改webpack.config.js

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

 public/index.html 修改入口文件

	
		
		
	
	
		hello world
		

		

		
less
		
.sass
		
scss
			
styl
		
	

修改图片打包路径方式  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]",
        },
      },