解决webpack5.54打包图片及图标的问题

解决webpack5.54打包图片及图标的问题

• 问题描述
• 分析原因
• 解决方法
• • 一、loader的解决方法
  • [使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括图片和字体。但未能设定指定目录，均打包成了静态的资源](#使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括图片和字体。但未能设定指定目录，均打包成了静态的资源)

问题描述

在用webpack5.54打包图片及图标的时，打包不报错，但浏览里图片与图标均看不见，尤其是css里的背景图片和iconfont图标

分析原因

打包后，发现图片文件除了在指定的文件目录下打包了文件，在根目录下也有打包的文件，但文件名为默认的hash名，但没有iconfont.css打包文件。

看了一下打包后.html和.css文件，图片的路径是根目录下，图片的路径均不对，但我在webpack.config.js文件中明明指定了路径，也按要求打包了文件，后来经上网查，发现是webpack5.54版本太新了的问题。

{

exclude: /.(js|json|html|css|less|sass|png|gif|jpg|jpeg)$/,

loader: 'file-loader',

options: {

outputPath: 'font/',

publicPath: './font',

name: 'name.ext',

// esModule: false

},

// type:"javascript/auto"

// type:"asset"

}

解决方法

一、loader的解决方法

关于下载url- loader 之后打包图片不显示的问题

webpack5 已经启用旧版的assets loader, 需要在webpack.confid.js中添加配置(在对应的module中)

不会重复打包，多次使用同一个资源，只会生成一个文件。当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。

关于html-loader 打包不显示的问题

需要在配置中添加

esModule: false// 关闭es6模块的解析， 使用commonjs模块解析在 webpack 5 之前，通常使用：

{
	exclude: /\.(js|json|html|css|less|sass|png|gif|jpg|jpeg)$/,
	loader: 'file-loader',
	options: {
		outputPath: 'font/',
		publicPath: './font',
		name: '[name].[ext]',
		esModule: false
	},
	type:"javascript/auto"
}

使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括图片和字体。但未能设定指定目录，均打包成了静态的资源

 {
	exclude: /\.(js|json|html|css|less|sass|png|gif|jpg|jpeg)$/,
	type:"javascript/auto"
}