前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3-2 使用loader打包静态资源(图片)

3-2 使用loader打包静态资源(图片)

作者头像
love丁酥酥
发布2019-06-16 13:05:57
5120
发布2019-06-16 13:05:57
举报
文章被收录于专栏:coding for love

1. 简介

本节介绍loader打包静态图片资源的一些配置。

2. file-loader打包图片配置

上一节我们成功打包并展示了一张图片。可是我们看到最终输出的图片名称是一串hash值,如果我们希望其展示的是原来的名称呢?可以进行如下配置:

代码语言:javascript
复制
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        }]
    }

运行打包命令后如图示:

运行打包命令后如图:

这里的[name]和[ext]都是占位符placeholders,含义如下:

image.png

我们也可以决定目标文件输出的位置:

代码语言:javascript
复制
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        }]
    }

可以看到图片的输出位置在images目录下。

image.png

3. url-loader打包图片配置

url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。 先安装:

代码语言:javascript
复制
cnpm i --D url-loader

然后将之前的file-loader改成url-loader,如下:

代码语言:javascript
复制
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        }]
    }

运行后,发现没有图片显示:

image.png

这是为什么呢,原来图片被打包成了base64,而我们之前由于偷懒不想每次都手动拷贝一个index.html到build目录下。所以在图片路径前加了一个./build。现在将其改回:

代码语言:javascript
复制
import timg from './img/timg.jpeg';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    dom.appendChild(content);
}

重新运行如下:

image.png

图片正常展示。这样的好处是减少了一次请求,坏处则是加大了js文件的体积。所以我们应该对打包成base64的图片大小做一个限制。如下:

代码语言:javascript
复制
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build/'
    },
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    limit: 2048
                }
            }
        }]
    }
};

注意,我们此时额外增加了一个配置publicPath,用来指明静态文件的输出地址。这样,不管是打包成base64还是打包成文件都能正常显示。

image.png

参考

https://www.webpackjs.com/loaders/file-loader/ https://www.webpackjs.com/loaders/url-loader/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.06.15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 简介
  • 2. file-loader打包图片配置
  • 3. url-loader打包图片配置
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档