webpack-url-loader 解决项目中图片打包路径问题
刚开始用webpack的同学很容易掉进图片打包这个坑里，比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。
下面我们就来分析下在webpack项目中图片的应用场景。
1.CSS文件中的背景图等设置
项目目录图：
以下以我项目中的test.css为例
.test{
color: red;
width: 150px;
height: 100px;
overflow: hidden;
background: url("../img/box@2x.png") no-repeat;
background-size: 150px auto;
}
.img-base64{
color: red;
width: 150px;
height: 100px;
overflow: hidden;
background: url("../img/media1.png") no-repeat;
background-size: 100px auto;
}
#img-e {
width:100px;
}
2.html文件中引入图片，下面为模板文件index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack-img</title> </head> <body> 1.css背景图 图片格式 <div class="test"></div> 2.css背景图 转化为base64 <div class="img-base64"></div> 3.html里引入图片 <div><img src="img/media4.png" alt=""></div> 4.js里引入图片 </body> </html>
3.js中引入图片
require('../css/test.css');
var imgSrc = require('../img/do.gif');
var img = new Image();
img.id = 'img-e';
img.src = imgSrc;
document.body.appendChild(img);
url-loader
在 webpack 中引入图片需要依赖 url-loader 这个加载器。
在 webpack.config.js 文件中配置如下：
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
}
test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。
loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名
而使用extractTextPlugin插件时，需要配置publicPath: "../", 不配置时css文件中背景图默认地址会在css文件夹下查找图片资源，导致项目图片路径不正确
webpack.config.js 配置文件如下：
const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const extractCSS = new extractTextPlugin("css/[name].[hash:6].css")//
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
module.exports = {
//注意这里是exports不是
entry: './src/js/main.js',
output: {
publicPath:"./",
path: path.resolve(__dirname + "/dist"),
//打包后的js文件存放的地方
filename: "js/[name].[hash:6].js" //打包后的js文件名
},
plugins: [
extractCSS,
new OptimizeCssAssetsPlugin(),//压缩css
new webpack.optimize.UglifyJsPlugin(),//new uglify(),//压缩js
new HtmlWebpackPlugin({
filename: 'index.html',
template:'src/index.html'
})
],
module: {
rules: [ //1.0的是loaders
//处理js中的loader
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, '/src'),
//指定打包的文件
exclude: path.resolve(__dirname, '/node_modules') //排除打包的文件，加速打包时间
},
//处理css中的loader
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
publicPath: "../",
use: [
{
loader: 'css-loader',
options:{
minimize: true //css压缩
}
}
]
})
},
//处理html模板中的loader
{
test: /\.html$/,
loader: 'html-loader'
},
//处理ejs模板中的loader,以.tpl后缀结尾的
{
test: /\.tpl$/,
loader: 'ejs-loader'
},
//处理图片中的loader,file-loader,url-loader,image-webpack-loader相互配合(图片格式转换base64 图片压缩)
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
}
]
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
webpack file-loader和url-loader的区别
1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的.这就会导致图片引入失败.这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅
-
详解webpack之图片引入-增强的file-loader：url-loader
前言: 本文介绍了url-loader(增强的file-loader): url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面:从而减少服务器请求.优化性能. url-loader解决的问题: 如果图片较多,会发很多http请求,会降低页面性能.url-loader会将引入的图片编码,生成dataURl.相当于把图片数据翻译成一串字符.再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了.当然,如果图片较大,编码会消耗性能.因此url-loader提供了
-
webpack-url-loader 解决项目中图片打包路径问题
刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里. 下面我们就来分析下在webpack项目中图片的应用场景. 1.CSS文件中的背景图等设置 项目目录图: 以下以我项目中的test.css为例 .test{ color: red; width: 150px; height: 100px; overflow: hidden; background: url("../img/box@2x.png") no-repe
-
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
使用vue打包,通过css引用图片资源. .img { height: 500px; width: 100%; background: url("./assets/img/1.jpg") no-repeat; background-size: 100%; } 热更新开发环境的效果是这样 但打完包出来的页面却报找不到资源的错误. 查了一下原因,css引入图片再打包后,style-loader无法设置自己的publicPath,于是我改变了ExtractTextPlugin的css路径pu
-
彻底搞懂并解决vue-cli4中图片显示的问题实现
在基于 vue-cli 实际开发过程中,很多小伙伴都会遇到关于图片显示的困扰,不管怎么设置,图片就是显示不出来,今天我们来详细说说这个问题. 图片无法显示,绝大部门的情况是图片路径问题,要搞懂路径问题,分别有相对路径与绝对路径 实际开发中使用图片最多的场景有以下三种: 1.手动引入 <template> <img :src="imgurl" /> </template> <script> import logo from '../img/
-
解决Spyder中图片显示太小的问题
最近在做机器学习的作业,需要画决策树.在Spyder中把代码跑了一遍,发现决策树出现在了Spyder的console中,而且图片很小,那些字体都叠在一起.网上搜了一圈好像也没找到解决方案. 但不要紧啊,Anaconda中不是还有Ipython和Jupyter Notebook吗.这两个都可以弹出窗口显示图片.cd到相应路径,在这两个中跑一下之前保存过的python代码就可以了. run XXX.py 以上这篇解决Spyder中图片显示太小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考
-
如何解决项目中java heap space的问题
起因 17年的一个项目出了OOM(java heap space)问题,眼下有个问题:法院项目,不能外网,一连接外网高院会直接定位到计算机,发出警报(档案的机密性啊)不能远程,那只能视频教他们怎么做了,全程和一个文员说代码,真的很累==! 过程 这个过程对一个不太了解内存的问题的开发无疑是艰难的,搜了一下,知道了是内存溢出导致的,于是着手解决 网上大多数都说调整运行内存,我也跟这个试了,但是不见效果,具体操作过程如下 设置-Xms256m -Xmx512m -XX:PermSize=64M -
-
java项目中的绝对路径和相对路径用法说明
绝对路径:不可改变的路径 本地绝对路径:增加盘符的路径(e:/test/test.html) 网络绝对路径:增加协议,IP地址,端口号的路径(http://localhost:8080/test/test.html) 相对路径:可以改变的路径,但是以基准路径为参考,查找其他路径 默认情况下,相对路径的基准路径是以当前资源的访问路径为基准 在项目中引入资源文件路径以斜杠开头,表示的特殊的相对路径,在不同的场景中,相对的位置会发生变化. url : http://localhost:8080/atc
-
vue项目中图片懒加载时出现的问题及解决
目录 vue图片懒加载的问题 vue图片懒加载实现步骤 vue图片懒加载踩过的坑 今天踩过的坑总结 vue图片懒加载的问题 项目中遇到一个问题,记录一下,vue项目中前期没有做图片懒加载的时候,当图片出现错误或者显示路径不对,我加了onerror事件进行错误监听并添加一张默认的图片,优化用户体验. 后期因为图片数量变多,所以加入了图片懒加载,但在懒加载中挂载时只加了loading的图片,没有加error,所以导致页面图片未正常加载的地方出现默认图片闪烁的现象,最后在挂载时加入error引入一张默
-
vue-cli+webpack在生成的项目中使用bootstrap实例代码
在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name v
-
使用Spring CROS解决项目中的跨域问题详解
CROS(Cross-Origin Resource Sharing) 用于解决浏览器中跨域请求的问题.简单的Get请求可以使用JSONP来解决,而对于其它复杂的请求则需要后端应用的支持CROS.Spring在4.2版本之后提供了@CrossOrigin 注解来实现对Cross的支持. 在Controller方法上配置 @CrossOrigin(origins = {"http://loaclhost:8088"}) @RequestMapping(value = "/cro
-
vue项目中 jsconfig.json概念及使用步骤
目录 vue项目中 jsconfig.json是什么 概述 一.使用tsconfig.json或jsconfig.json 二.使用步骤 1. 配置说明 2. 配置 webpack 别名 3. compilerOptions配置 总结 vue项目中 jsconfig.json是什么 当您在工作空间中有一个定义项目上下文的jsconfig.json文件时,JavaScript体验会得到改进. 这杰斯也太官方了,说白了就是提高在写项目时舒适度的. 概述 目录中存在tsconfig.json文件表明该