webpack图片打包

url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。

安装：

npm install url-loader --save-dev

当然你可以将其写入配置中，以后与其他工具模块一起安装。

在 webpack.config.js 文件中配置如下：

module: {loaders: [{test: /\.(png|jpg)$/,loader: 'url-loader?limit=8192'}]
}

test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。

loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。

url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名：

module: {loaders: [{test: /\.(png|jpg)$/,loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'}]
}

上例中的 name 字段指定了在打包根目录（output.path）下生成名为 images 的文件夹，并在原图片名前加上8位 hash 值。

转载于:https://www.cnblogs.com/aim-at-is-the-tao-in/p/6043832.html

webpack图片打包相关推荐

webpack 图片的路径与打包
1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="backgrou ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
webpack——文件和图片打包
file-loader 命名参数列表: 配置webpack.config.js如下: 运行webpack打包输出如下: url-loader url-loader 用法与file-loader相似,可 ...
webpack将部分图片打包后转化为base64
webpack将部分图片打包后转化为base64主要依靠url-loader实现. 使用步骤: 安装url-loader: npm install url-loader -D webpack配置 {t ...
webpack:url-loader打包后找不到图片、字体路径问题
项目在css中引用图片,打包之后找不到对应的图片和字体路径打包配置文件的路径配置:project/config/index.js 对应的图片打包配置:project/build/we ...
webpack学习笔记（六）：图片打包处理
本片文章将记录webpack中如何处理图片的打包问题.在介绍图片打包处理之前,先说明一下引入图片的三种方式: 使用背景图片:将一个包裹图片的元素的css中的background属性设置为图片路径使用 ...
html5图片怎么打包,webpack如何打包图片
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 初学webpack打包图片的时候,会遇到几种情况,需要注意. 首先在webpack中打包图片需要依赖于url-loade ...
webpack4踩坑——图片打包
小伙伴们在学习 webpack 的时候有没有这样的经历呢,按照 webpack 官网的教程,一步步构建出自己的脚手架,看到满屏的代码,以及开发环境中花里胡哨的特效,啧啧啧,内心甚至有一丢丢小激动~~~ ...
Webpack基础打包
认识webpack 事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了: 比如开发过程中我们需要通过模块化的方式来开发: 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过E ...

webpack图片打包

webpack图片打包相关推荐

最新文章

热门文章