使用webpack的file-loader和url-loader打包图片资源

最新推荐文章于 2024-07-21 15:11:42 发布

yin_991

最新推荐文章于 2024-07-21 15:11:42 发布

阅读量4.2k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/yin_991/article/details/103325373

版权

本文介绍了如何使用webpack的file-loader和url-loader打包图片资源，并解决图片在浏览器中显示的问题。通过file-loader，图片被打包到dist目录下，而url-loader根据limit值决定是否将图片转为base64格式并内联到bundle.js中。

摘要由CSDN通过智能技术生成

前面写了webpack打包js文件的方法，但打包图片资源又会用到什么的方法呢？本文就这个问题进行探讨学习。

本文的目的是使用webpack打包图片资源，并能够使打包后的图片显示在浏览器上。

初始化目录

首先，备好一张图片素材，我使用的是一张之前在网上下载过的手机图片，格式为jpg，当然，使用其他的格式如png、gif也是可以的，到时在配置文件里面更改响应的配置即可。

开始的时候目录长这样：

这是在安装好了webpack、webpack-cli，初始化了项目（npm init）、手动添加了webpck.config.js文件后的目录结构，如果没有这些，首先需要安装和初始化一下，我前面的文章也有写到，有需要的可以翻看我之前的文章。

跟之前不同的是，我添加了image.js文件，添加了图片素材。

接下来打开image.js文件进行代码编写，比较简单的一个功能，就是把图片引入到image.js，创建一个img标签，img标签的路径src为引入的图片，然后把img标签挂载到页面上。

Now show you the code：

image.js

import photo from './image/mz16th.jpg';

function Image () {
    var dom = document.getElementById('root');
    var img = document.createElement('img');
    img.src = photo;
    dom.append(img);
}

export default Image;

index.js

import Image from './image.js';

new Image();

使用file-loader

webpack.config.js文件就是打包配置了，打包图片资源可以使用file-loader和url-loader，首先介绍的是file-loader，使用file-loader需要安装一下，使用本地安装，npm install file-loader --save-dev或者npm install file-loader -D，成功安装显示如下：

然后在module中进行file-loader的配置：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: '