目录结构:

引用图片:

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. (转)Hyper-v 安装CentOS 7 (其他虚拟机一样参考)

    转:https://www.cnblogs.com/dunitian/p/4976077.html 平台之大势何人能挡? 带着你的Net飞奔吧!http://www.cnblogs.com/dunit ...

  2. HDU4089 Activation(概率DP+处理环迭代式子)

    题意:有n个人排队等着在官网上激活游戏.Tomato排在第m个. 对于队列中的第一个人.有一下情况: 1.激活失败,留在队列中等待下一次激活(概率为p1) 2.失去连接,出队列,然后排在队列的最后(概 ...

  3. Python网络爬虫-爬取微博热搜

    微博热搜的爬取较为简单,我只是用了lxml和requests两个库 url=https://s.weibo.com/top/summary?Refer=top_hot&topnav=1& ...

  4. JAVA数组的toString()方法不能直接输出数组内容?

    问题描述:我定义了一个类,类名是Job,当我输出Job.toString()是可以按我重载的toString方法输出的,但是如果输出jobs[]这个数组时,只会输出[Lmodel.Job;@45e22 ...

  5. for的循环题

    package Tony2;import java.util.Scanner; public class Day27 { public static void main(String[] args) ...

  6. vm虚拟机用批处理启动和关闭

    title vmware 虚拟机开启中 cls&&echo 正在开启VMware虚拟机,请稍候... "D:\vmware\vmware.exe" -x " ...

  7. Golang通过反射获取结构体的标签

    Golang通过反射获取结构体的标签 例子: package main import ( "fmt" "reflect" ) type resume struc ...

  8. 网络流强化-HDU2732

    第一次遇到加了“多余”的边会导致WA的——在我看来是很多余,见代码191行 之后会思考为什么,想出来再更. 问题弄明白了,如果你在连接边连了一条到没有柱子的点的边,这个没有柱子的点是不可能连到终点的, ...

  9. 在Linux上安装MySQL

    一.获取mysql YUM源    打开网址:https://dev.mysql.com/downloads/repo/yum/,选择对应linux版本 点击“No thanks, just star ...

  10. Spring cloud学习--Zuul02

    过滤器 Zuul包括两部分内容:请求的路由和过滤.而实际上请求的路由也是通过过滤器实现的,例如理由映射主要通过pre类型的过滤器完成,它将请求路径与配置的路由规则进行匹配,找到需要转发的目标地址:请求 ...