webpack打包html里面img后src为“[object Module]”问题

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

在html中引入img图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document1</title>
</head>
<body>
  <div id="root"  >
    <img src="https://segmentfault.com/a/1190000021360248/./logo.jpg" alt="">
  </div>
</html>

使用url-loader/file-loader结合html-loader打包

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [{
        loader: 'url-loader',
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            limit: 10240
        }
    }]
},
{
    test: /\.(htm|html)$/,
    loader: 'html-loader'
}

发现打包后html里面,img的src为[object Module]
image.png

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true,因此手动设置为false

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [{
        loader: 'url-loader',
        // loader: 'file-loader',
        options: {
            esModule: false, // 这里设置为false
            name: '[name].[ext]',
            limit: 10240
        }
    }]
}

image.png

这样就可以正常打包了
image.png

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看