webpack图片加载器url-loader

效果展示：

功能：

安装和配置webpack图片加载器，在项目中加载图片

步骤：

新建images文件夹，在文件夹中添加图片

index.html中创建img标签

<img src="" alt="" class="box">

index.js中导入：

// 导入图片，得到图片文件
import logo from './images/logo.jpg'
// 给img标签的src动态赋值
$('.box').attr('src',logo)

cmd中安装loader：

npm i url-loader@4.1.1 file-loader@6.2.0 -D

webpack中配置：

{
    test: /\.jpg|png|gif$/,
    use: [
        'url-loader?limit=22229',
    ]
}

 cmd运行项目：