1. 安装 file-loader html-loader

npm install file-loader html-loader --save-dev

其中html-loader生效需配合 html-webpack-plugin (分离html插件)才能生效

2. 在webpack.config.js中配置

module.exports={
//...code
module:{
rules:[
{ //处理样式表中引入的图片
test: /\.(png|jpg|gif|jpeg)$/,
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: './img',
esModule: false
}
},
{
//处理html内联的图片
test: /\.(html)$/,
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src']
}
}
]
}
}

3. 使用方法

index.css

#bgImg {
width: 10em;
height: 10em;
background: url("./../imgs/favicon.png");
}

index.js

import "./xxx/css/index.css"

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

  1. webpack 读取文件变量

    1.webpack 获取文件中变量 <%= htmlWebpackPlugin.options.title %> <p><%= htmlWebpackPlugin.opt ...

  2. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

  3. webpack打包文件

    npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...

  4. vue+webpack 打包文件 404 页面空白

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...

  5. webpack css文件编译、自动添加前缀、剥离

    1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中 npm i style-loader -D // css文件loader npm i ...

  6. 解决 webpack 打包文件体积过大

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  7. webpack打包文件解析

    /** * 对于没有代码分割的,webpack会打包生成main.js一个大的自执行函数 * 函数参数是一个对象,键值分别是路径和模块的函数 * 函数内部定义了一些方法,包括__webpack_req ...

  8. webpack 图片文件处理loader

    目录结构: 引用图片: body { /*background: red;*/ /*background: url("../img/test2.jpg"); 小图片*/ backg ...

  9. webpack(6)webpack处理图片

    图片处理url-loader(webpack5之前的处理方式) 在项目开发中,我们时长会需要使用到图片,比如在img文件夹中有图片test1.png,然后在normal.css中会引用到图片 body ...

随机推荐

  1. HTML --- 简单的标签

    HTML --- 简单的标签 html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是 ...

  2. 应用程序正常初始化(0xc0150002)失败的终极解决方案

    转自VC错误:http://www.vcerror.com/?p=62 最近做一个项目写了一个VC6下的MFC程序,结果传到别人的机子上(WIN7)出现了应用程序正常初始化(0xc0150002)失败 ...

  3. 【CF900D】Unusual Sequences

    题目 智力下降严重 显然要反演了呀 首先必须满足\(x|y\),否则答案是\(0\) 我们枚举这个数列的\(gcd\)是\(d\)或者\(d\)的倍数 于是答案就是 \[\sum_{x|d}[d|y] ...

  4. 记因为电脑名更改而导致sql server一直连接失败

    安装的是sql server2016.原先一直用的好好的,直到有一天觉得电脑名称,嗯要改下.改完后,嗯,就忘了. 然后打开sql server,连接失败.一开始以为是sql server配置管理器中的 ...

  5. Hibernate的多对多映射

    一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包,创建 hibernate.cfg.xml 文件,并配置,配置项如下 ...

  6. lxml etree对存在的xml添加新节点,新节点没有排版格式化

    新添加的时候如果不做处理,是这个样子 要在解析xml加上 parser = etree.XMLParser(remove_blank_text=True)xml = etree.parse(major ...

  7. 移植 inetd

    inetd 的选择及获取 Busybox1.1.3 提供了 inetd 支持.如果读者使用的是较低版本的不提供 inetd 的 Busybox,那么可以考虑使 用 netkit 套件来提供网络服务.强 ...

  8. AndroidStudio 添加翻译插件

    添加方式 第一步 在AndroidStudio的菜单栏里找到 File > Settings > 点击 . 第二步 点击Plugins > 在点击Marketplace 等待插件列表 ...

  9. React报错:Laravel React-Router browserHistory 刷新子页面报错404

    举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...

  10. 常见的HTTP状态码详细解析

    http状态码分为五类 : 1XX 信息 服务器收到请求,需要请求者继续操作 2XX 成功 请求被成功接手并返回给请求者 3XX 重定向 需要进一步操作才能完成请求 4XX 客户端错误 请求包含语法错 ...