目录结构:

引用图片:

body {
/*background: red;*/
/*background: url("../img/test2.jpg"); 小图片*/
background: url("../img/test.jpg"); /*大图片*/
}

安装url-loader和file-loader:

npm install --save-dev url-loader 
npm install --save-dev file-loader//当文件大小超过limit时会用file-loader来编译

配置webpack.config.js:

module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
//当加载的图片小于limit时,会直接用url-loader将图片的格式编译成base64格式的
//当加载图片大于limit时,需要使用file-loader来编译,并且打包到dist文件夹下面
options: {
limit: 16000,
name: 'img/[name].[hash:8].[ext]' // 对打包后的图片命名进行相关的处理,表示在dist文件夹下建一个img文件夹保存图片,同时图片的名字是原来的名字加上8位hash值,
再加上图片的扩展名
}
}
]
}
]
},
当加载的图片小于limit时,会直接用url-loader将图片的格式编译成base64格式的打包后显示如下:

当加载图片大于limit时,需要使用file-loader来编译,并且打包到dist文件夹下面,同时需要在webpack.config.js里面配置加载图片的路径
module.exports = {  //导出入口和出口路径
entry: './src/main.js', //入口文件
output: { // 动态获取路径
path: path.resolve(__dirname, 'dist'), // resolve拼接路径 __dirname是node自带全局变量,保存现在项目的路径
filename: 'bundle.js',
publicPath: 'dist/' //处理完的图片加载路径是这个
},
打包后显示如下:

如果不对打包后的图片命名处理的话就是一下这种形似的

处理之后是这种形式的:

对打包后的图片命名进行相关的处理,表示在dist文件夹下建一个img文件夹保存图片,同时图片的名字是原来的名字加上8位hash值,再加上图片的扩展名:

在options中添加上name相关配置:
options: {
limit: 16000,
name: 'img/[name].[hash:8].[ext]'
}
img:文件要打包到的文件夹
name:获取图片原来的名字,放在该位置
hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位
ext:使用图片原来的扩展名

webpack 图片文件处理loader的更多相关文章

  1. webpack 打包出多个HTML文件,多个js文件,图片文件放置到指定文件夹中

    一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...

  2. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  3. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  4. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  5. webpack 学习4 使用loader 以及常用的一些loader

    webpack本身只支持处理JavaScript,其他的文件,如css img less是不识别的,所以才会有loader这个东西,它就是可以使webpack能够处理其他非js文件的拓展程序 首先我们 ...

  6. Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. webpack 图片没打包成功

    webpack 图片打包: 直接src引用的 src='../../logo.png,webpack不会进行打包 作为背景图片的,打包成功了 解决(react 写法): 1.import 方法(推荐) ...

  8. webpack 处理图片文件

    1. 安装 file-loader html-loader npm install file-loader html-loader --save-dev 其中html-loader生效需配合 html ...

  9. JavaScript根据文件名后缀判断是否图片文件

    //JavaScript根据文件名后缀判断是否图片文件 //图片文件的后缀名 var imgExt = new Array(".png",".jpg",&quo ...

随机推荐

  1. 台哥原创:java 扫雷源码

    扫雷,十年前大学时候开发的,界面参照的电脑自带扫雷游戏. 一直是我最喜欢的单机游戏,现在微软的新系统都不能玩了. 幸好还有自己开发的,可以过下瘾.程序员就有这点好处嘛. ​ 这几年陆陆续续,把这个扫雷 ...

  2. Only variables should be passed by reference

    报错位置代码: $status->type = array_pop(explode('\\',$status->type))   (此处$status->type值原本是  APP\ ...

  3. MySQL case when then else end用法

    链接:https://blog.csdn.net/konglongaa/article/details/80250253 case具有两种格式,简单case函数和case搜索函数. 1.简单case函 ...

  4. TCP概述

    1. TCP提供的服务 我们知道TCP是一个面向连接.提供可靠数据数据传输服务的传输层协议.面向连接意味着发送端和接收端在交换数据前需要建立一个连接,和我们平常打电话一样,在通话前,需要拨号建立连接. ...

  5. 【ABAP系列】SAP ABAP基础-abap数据类型的解析整理

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP基础-abap数 ...

  6. 高级ACL访问控制列表

    实验拓扑: 配置: 基本配置做完之后搭建OSPF网络 R1: ospf 1 area 0 network 10.0.13.0 0.0.0.255 network 1.1.1.1 0.0.0.0 R2: ...

  7. [Python3] 023 面向对象 第三弹

    目录 7. 类相关函数 8. 类的成员描述符(属性) 9. 类的内置属性 10. 类的常用魔术方法 10.1 操作类 10.2 描述符 10.3 属性操作 10.4 运算分类相关魔术方法 接上一篇 [ ...

  8. input限制小数点的位数

    在做限制input小数点的时候,我本来想通过vue里面的的watch监听来实现, ---实现逻辑是,通过监听输入的内容,当出现"."(点)的时候,记录通过indexOf获取点的位置 ...

  9. 移动app云测试平台

    一:移动App云测试平台 1.云测试平台背景 随着智能手机的普及率和渗透率越来越高,App开发软件也越来越多.但是因为安卓和IOS的碎片化,尤其是安卓,因为完全开源的原因,导致设备繁多,品牌众多,版本 ...

  10. LibreOJ 6177 题解(状压DP)

    题面 传送门 分析 刚看到这道题时想的是跟最短哈密顿路类似的二进制状压DP,先用floyd处理距离 但是此题用二进制不够,应该用三进制 0,1,2分别表示未送,正在送,已送完 dp[s][i]表示当前 ...