当我们使用webpack和ES6 import导入图像时会发生什么？

mwg9r5ms 于 2023-04-30 发布在 Webpack

关注(0)|答案(1)|浏览(146)

以下是webpack资产管理指南中的示例代码（由我调整）：

import Icon from './icon.png';
var myIcon = new Image();
myIcon.src = Icon;
document.body.appendChild(myIcon);

下面是一个例子：

import asdfasdfasdf from './icon.png';
var myIcon = new Image();
myIcon.src = asdfasdfasdf;
document.body.appendChild(myIcon);

这个也可以。
这是怎么回事？当我使用webpack导入文件时，究竟从文件导入了什么？

1条答案

正如您所指定的，有一个webpack load可以“处理”图像导入，

{
   test: /\.(png|svg|jpg|gif)$/,
   use: [
      'file-loader'
   ]
}

该配置告诉webpack在导入图像时使用file-loader。
import img from './file.png'发射文件。png作为文件在输出目录中返回公共URL“/public/path/0 dcbbaa 7013869 e351 f。png”