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处理VBArray的函数使用说明
May 11 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 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
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js DOM模型操作
2009/12/28 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
详解VUE 数组更新
2017/12/16 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
Python中pygame安装方法图文详解
2015/11/11 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python使用re模块验证危险字符
2020/05/21 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
意向协议书范本
2014/04/23 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript