webpack-url-loader 解决项目中图片打包路径问题


Posted in Javascript onFebruary 15, 2019

刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。

下面我们就来分析下在webpack项目中图片的应用场景。

1.CSS文件中的背景图等设置

项目目录图:

webpack-url-loader 解决项目中图片打包路径问题

以下以我项目中的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]'
   }
   ]
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
js倒计时简单实现方法
Dec 17 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue实力踩坑之push当前页无效
Apr 10 Vue.js
微信小程序实现单选选项卡切换效果
Jun 19 #Javascript
一秒学会微信小程序制作table表格
Feb 14 #Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 #Javascript
微信小程序实现简易table表格
Jun 19 #Javascript
微信小程序制作表格的方法
Feb 14 #Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
微信小程序实现简单表格
Feb 14 #Javascript
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP安全编程之加密功能
2006/10/09 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php实现的短网址算法分享
2014/06/20 PHP
php curl发送请求实例方法
2019/08/01 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python读取图片属性信息的实现方法
2016/09/11 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
利用python 下载bilibili视频
2020/11/13 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
竞争上岗演讲稿
2014/01/05 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
《假如》教学反思
2014/04/17 职场文书
创先争优承诺书
2015/01/20 职场文书
同学聚会感言一句话
2015/07/30 职场文书
2016年母亲节广告语
2016/01/28 职场文书
民事调解协议书
2016/03/21 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL