webpack图片加载器url-loader

效果展示:

webpack图片加载器url-loader_第1张图片

功能:

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

步骤:

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

webpack图片加载器url-loader_第2张图片

index.html中创建img标签

webpack图片加载器url-loader_第3张图片

index.js中导入:

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

cmd中安装loader:

npm i [email protected] [email protected] -D

webpack图片加载器url-loader_第4张图片

webpack中配置:

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

webpack图片加载器url-loader_第5张图片

 cmd运行项目:

webpack图片加载器url-loader_第6张图片

 

webpack图片加载器url-loader_第7张图片

 

你可能感兴趣的:(Node.js,webpack,jQuery,webpack,前端,node.js)