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

Question

以下是来自webpack Asset Management guide的示例代码（由我调整）：

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导入文件时，从文件导入的确切内容是什么？

Answer 1

正如您所指定的那样，有一个webpack load，＆＃34;处理＆＃34;图片导入，

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

该配置告诉webpack在导入图像时使用file-loader。

  

import img from './file.png'   将file.png作为文件发送到输出目录中并返回公共URL   ＆＃34; /public/path/0dcbbaa7013869e351f.png"