webpack 处理图片文件
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 处理图片文件的更多相关文章
- webpack 读取文件变量
1.webpack 获取文件中变量 <%= htmlWebpackPlugin.options.title %> <p><%= htmlWebpackPlugin.opt ...
- 成功解决react+webpack打包文件过大的问题
最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...
- webpack打包文件
npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...
- vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...
- webpack css文件编译、自动添加前缀、剥离
1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中 npm i style-loader -D // css文件loader npm i ...
- 解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- webpack打包文件解析
/** * 对于没有代码分割的,webpack会打包生成main.js一个大的自执行函数 * 函数参数是一个对象,键值分别是路径和模块的函数 * 函数内部定义了一些方法,包括__webpack_req ...
- webpack 图片文件处理loader
目录结构: 引用图片: body { /*background: red;*/ /*background: url("../img/test2.jpg"); 小图片*/ backg ...
- webpack(6)webpack处理图片
图片处理url-loader(webpack5之前的处理方式) 在项目开发中,我们时长会需要使用到图片,比如在img文件夹中有图片test1.png,然后在normal.css中会引用到图片 body ...
随机推荐
- HTML --- 简单的标签
HTML --- 简单的标签 html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是 ...
- 应用程序正常初始化(0xc0150002)失败的终极解决方案
转自VC错误:http://www.vcerror.com/?p=62 最近做一个项目写了一个VC6下的MFC程序,结果传到别人的机子上(WIN7)出现了应用程序正常初始化(0xc0150002)失败 ...
- 【CF900D】Unusual Sequences
题目 智力下降严重 显然要反演了呀 首先必须满足\(x|y\),否则答案是\(0\) 我们枚举这个数列的\(gcd\)是\(d\)或者\(d\)的倍数 于是答案就是 \[\sum_{x|d}[d|y] ...
- 记因为电脑名更改而导致sql server一直连接失败
安装的是sql server2016.原先一直用的好好的,直到有一天觉得电脑名称,嗯要改下.改完后,嗯,就忘了. 然后打开sql server,连接失败.一开始以为是sql server配置管理器中的 ...
- Hibernate的多对多映射
一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包,创建 hibernate.cfg.xml 文件,并配置,配置项如下 ...
- lxml etree对存在的xml添加新节点,新节点没有排版格式化
新添加的时候如果不做处理,是这个样子 要在解析xml加上 parser = etree.XMLParser(remove_blank_text=True)xml = etree.parse(major ...
- 移植 inetd
inetd 的选择及获取 Busybox1.1.3 提供了 inetd 支持.如果读者使用的是较低版本的不提供 inetd 的 Busybox,那么可以考虑使 用 netkit 套件来提供网络服务.强 ...
- AndroidStudio 添加翻译插件
添加方式 第一步 在AndroidStudio的菜单栏里找到 File > Settings > 点击 . 第二步 点击Plugins > 在点击Marketplace 等待插件列表 ...
- React报错:Laravel React-Router browserHistory 刷新子页面报错404
举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...
- 常见的HTTP状态码详细解析
http状态码分为五类 : 1XX 信息 服务器收到请求,需要请求者继续操作 2XX 成功 请求被成功接手并返回给请求者 3XX 重定向 需要进一步操作才能完成请求 4XX 客户端错误 请求包含语法错 ...