webpack打包图片

图片打包关键要用到file-loader或url-loader，其中url-loader与file-loader功能基本一致，只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。

安装

npm install --save-dev url-loader

module:{rules:[{test:/\.(png|gif|bmp|jpg)$/,use:'url-loader?limit=5000&name=image/[hash:8]-[name].[ext]'}]}

 {//将图片打包到发布环境中的images目录下test: /\.(jpg|jpeg|gif|png|svg)$/,use: {loader: 'url-loader',options: {limit: 1024 * 1,name: 'images/[hash:8].[ext]',publicPath: '../'}}

注意：limiet的意思是：图片大小小于limit时，使用base64转码。大于limit时，正常打包。

name：通过name属性改变图片的打包目录和文件名。

hash：图片经过处理后，会在输出文件夹中生成图片，此时图片的名字为hash。ext代表图片的格式。

publicPath：为你的文件配置自定义 public 发布目录

outputPath：为你的文件配置自定义 output 输出目录

注意：webpack 在打包时，首先会把图片复制到 /dist/images/ 文件夹下，然后把 css 文件中的 url 路径替换为 webpack 中 options 的 name 属性指向的路径，即 /images/logo.jpg, 但是这个路径是相对路径，是相对于 /dist/css/~.css 来说的，所以此处引用的文件地址为： /dist/css/images/logo.jpg。但是我们打包后的 css 文件夹中，并没有 images/logo.png, 所以图片并没有渲染出来。

webpack打包图片相关推荐

【webpack】使用webpack打包图片文件、打包时生成单独的css文件
使用webpack打包图片文件在scr目录下创建image文件夹,并且添加几张图片在main.js使用import方式引入所有图片,并且append到app节点下 // 引入图片资源 import ...
webpack 打包图片文件
一.准备工作 1. 在src文件夹中新建一个img文件夹,并且在里面放两张图片: 2.在css文件中引用图片,从而让webpack能够知道这个图片也是要打包的: 二. 使用url-loader和fi ...
Webpack打包图片-JS-Vue文件
打包图片等静态资源资源模块 | webpack 中文文档 (docschina.org) 1.加载图片案例准备为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两 ...
html5图片怎么打包,webpack打包图片
在前端开发过程中,在html.css和js中都经常会需要引用图片,引用图片就需要考虑图片引入路径的正确性.当项目进行打包会将元素引用的图片进行抽取放在固定位置,如图1-1与图1-2所示,这就需要对图片 ...
webpack打包图片报错
在项目中出现图片打包报错的问题. 在正常情况下我们只需要检查一下loader就好.还是报错.经过同事科学上网找到结合接手的项目猜测可能是由于图片文件是在纯js文件中引入导致.将图片引入路径换成在使用的 ...
html5图片怎么打包,webpack如何打包图片
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 初学webpack打包图片的时候,会遇到几种情况,需要注意. 首先在webpack中打包图片需要依赖于url-loade ...
webpack打包器小结（1）
================================================ [1]intro to webpack 官网: webpack官网: http://webpack ...
webpack5打包图片报错——Module parse failed: Octal literal in strict mode 图片不能正常显示
Octal literal in strict mode 一.webpack打包图片二.报错三.解决四.img标签中的图片打包后不能正常显示五.总结六.追加一.webpack打包图片 we ...
解决webpack打包样式url()背景图片问题
定位错误项目使用webpack4进行编译,打包后的样式中使用url方法指定的背景图片不能够正常显示源码戳这里 .bgurl{background-image: url('/images/abc.j ...

webpack打包图片

安装

webpack打包图片相关推荐

最新文章

热门文章