webpack4方法如下:
{
test: /\.(jpg|png|gif)$/,
// 要使用一个loader
// 下载 url-loader file-loader
dependency: { not: ['url'] },
use:[
{ loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
// 解析时会出现问题:[object Module]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule:false,
// 给图片进行重命名
// [hash:10]取图片的hash前10位
// [ext]取文件原来拓展名
name:'[hash:10].[ext]'
},}
],
type: 'javascript/auto'
},{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
}
webpack5方法如下:
{
// 处理图片资源 webpack5图片新打包方法
test: /\.(jpg|png|gif)$/,
// webpack5中使用assets-module(url-loader已废弃)
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024
}
},
generator: {
filename: 'img/[name].[hash:6][ext]',
publicPath: './'
}
},{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader处理)
// webpack5中使用 html-withimg-loader代替
// loader: 'html-loader'
loader: 'html-withimg-loader'
}