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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
微信小程序实现单选选项卡切换效果
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
用PHP创建PDF中文文档
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
师德师风的心得体会
2014/09/02 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
2016年安全月活动总结
2016/04/06 职场文书