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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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
Zerg建筑一览
2020/03/14 星际争霸
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php分页示例分享
2014/04/30 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
python实现bucket排序算法实例分析
2015/05/04 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
PyQt5实现下载进度条效果
2018/04/19 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
往来会计岗位职责
2013/12/19 职场文书
买卖车协议书
2014/04/21 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL