一张图带你了解webpack的require.context
2024-09-01 02:44:53
很多人应该像我一样,对于webpack
的require.context
都是一知半解吧。网上很多关于require.context
的使用案例,但是我没找到可以帮助我理解这个知识点的,于是也决定自己来探索一下,下面以网上流行的svg
图标方案为例说明。对了,本文的重点是require.context
,并不会去解释svg symbol
方案svg-sprite-loader
。
关键代码
src/icons/index.js
const context = require.context("./svg", true, /\.svg$/)
context.keys().map(context)
main.js
import '@/icons'
webpack.base.config.js
{
test: /\.svg$/,
loader: "svg-sprite-loader",
include: [resolve("src/icons")],
options: {
symbolId: "icon-[name]"
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
exclude: [resolve("src/icons")],
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
},
why?
很多人跟我一样,一开始只想说,为什么这样就可以,why???
要知道是什么,就上打印大法。
const context = require.context("./svg", true, /\.svg$/)
// 看看你是何方神圣
console.log(context)
context.keys().map(context)
下面就真的以一张图进行解释,有问题的欢迎留言交流呀!
最新文章
- mapreduce中一个map多个输入路径
- 【转】《从入门到精通云服务器》第七讲—负载均衡和CDN技术
- ToolProvider.getSystemJavaCompiler() Return NULL!
- ArcGIS将Nodata区设置为0
- chain.doFilter(req, resp)
- 低调的华丽,Windows Server 2003 ... 写给厌倦了XP,但又纠结于vista/win7花哨的童鞋(转)
- linux mysql服务器迁移
- UPC 2224 Boring Counting (离线线段树,统计区间[l,r]之间大小在[A,B]中的数的个数)
- Android编译过程详解(一)
- Java web.xml加载顺序
- delphi编程里的bool跟boolean类型有什么区别
- 小qyvlik 先看两个视频,和 QtQuick UI 问答
- <;C++Primer>;第四版 阅读笔记 第二部分 “容器和算法”
- mui框架下拉刷新和上拉刷新
- 20165337 2017-2018-2《Java程序设计》课程总结
- Java HashMap工作原理及实现[转]
- vue.js computed,watch的区别
- 错误代码 1045 Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password:YES)
- seo:网站地图提交
- 引爆你的Javascript代码进化
热门文章
- EF相关报错
- sql学习目录
- MVC linq执行顺序
- 关于WPF XAML 中 Trigger的反向ExitActions
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
- Hamcrest、Mockito 专题
- 写给非专业人士看的 *** 简介(同时也解释了GFW )
- 有未经处理的异常(在 xx.exe 中): 堆栈 Cookie 检测代码检测到基于堆栈的缓冲区溢出。
- Android零基础入门第65节:RecyclerView分割线开发技巧
- ML:梯度下降(Gradient Descent)