处理图片的loader: file-loader

要处理jpg、png等格式的图片，我们也需要有对应的loader： file-loader
file-loader的作用就是帮助我们处理import/require()等方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；
当然也可以修改它的名字和所在文件夹

安装该loader

npm install file-loader -D

使用require或import引用图片资源

img.src = require('../image/1.jpg').default;
-----------------------
import myImg from '../image/2.jpg';
img.src = myImg;

webpack.config.js

{
  test:/\.(png|jpe?g|gif|svg)$/,
  use:'file-loader'
}

• 有时候我们处理后的文件名称按照一定的规则进行显示：
  比如保留原理的文件名、扩展名，同时为了防止重复，包含一个hash值；
• 这个时候我们可以使用PlaceHolder来完成，webpack给我们提供了大量的placeHolders来显示不同的内容
  可以在webpack的文档中查阅自己需要的placeHolder;
• 最常用的placeHolder
  [ext] 处理文件的扩展名；
  [name]:处理文件的名称；
  [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128bit的hash值（32个16进制）
  [hash:< length >]:截取hash的长度，默认32个字符太长了；
  [path]:文件相对于webpack配置文件的路径

{
   test:/\.(png|jpe?g|gif|svg)$/,
   use:[
     {
       loader:'file-loader',
       options:{
         name:"img/[name].[hash:6].[ext]",//img目录
       }
     }
   ]
 }