一张图带你了解webpack的require.context
很多人应该像我一样,对于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)
下面就真的以一张图进行解释,有问题的欢迎留言交流呀!
一张图带你了解webpack的require.context的更多相关文章
- dva webpack 利用require.context加载多个model
dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 [模块.js], 每次在index.js使用 app.model(require('./models/exa ...
- webpack中require.context 用法
1.require.context(directory, useSubdirectories = false, regExp = /^\.\//) Examples: require.context( ...
- webpack的require.context()实现路由“去中心化”管理
最近在开发一个大型vue单页面应用的时候,项目最初是将所有的路由写在一个router.js的文件里. const router = new Router({ mode: "history&q ...
- 8张图带你理解Java整个只是网络(转载)
8张图带你理解Java整个只是网络 一图胜千言,下面图解均来自Program Creek 网站的Java教程,目前它们拥有最多的票选.如果图解没有阐明问题,那么你可以借助它的标题来一窥究竟. 1.字符 ...
- [Vue]webpack的require与require.context
1.require 1.1完整路径的require语句: require('tools'); //preset alias tools require('./js/main'); 1.2带表达式的 r ...
- webpack的带表达式require和require.context()方法
带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...
- 关于webpack require.context() 的那点事
先说 webpack里面有这么一招:使用require.context()方法来自动导入模块 官方文档有点深奥,老衲百度下拿了一段来直接使用,但是想看下它是如何运行的 本篇这里不会有太深入的研究,只是 ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- 47 张图带你 MySQL 进阶!!!
我们在 MySQL 入门篇主要介绍了基本的 SQL 命令.数据类型和函数,在局部以上知识后,你就可以进行 MySQL 的开发工作了,但是如果要成为一个合格的开发人员,你还要具备一些更高级的技能,下面我 ...
随机推荐
- TASM 5.0 安装及使用教程
安装TASM 5.0很简单,您只需要下载本站[相关工具]中的"TASM50.zip"文件,解压后在Windows9x/NT下执行"INSTALL.EXE"即可开 ...
- Emgu-WPF 激光雷达研究-移动物体跟踪2
原文:Emgu-WPF 激光雷达研究-移动物体跟踪2 初步实现了去燥跟踪,并用圆点标注障碍物 https://blog.csdn.net/u013224722/article/details/8078 ...
- redis 从0到1 linux下的安装使用 数据类型 以及操作指令 一
安装 redis 到 /usr/目录下 我这里安装的是redis-3.2.9.tar.gz tar zxvf redis-3.2.9.tar.gz -C /usr 然后进行 执行编译命令 mak ...
- 配置 Visual Studio Tools for Apache Cordova
原文:配置 Visual Studio Tools for Apache Cordova 1.连接地址 https://msdn.microsoft.com/zh-cn/library/vs/alm/ ...
- Win10《芒果TV》商店版更新v3.2.1:优化手机版卡顿,修复推送故障
此版本是小版本更新,主要是修复上一版本发布后暴露的部分体验问题,以免进一步扩大影响,小幅修复后更新上线. 芒果TV UWP V3.2.1更新内容清单: 1.优化和修复列表预加载机制的本地保存丢失导致的 ...
- mysql 服务压缩包安装,用户创建
wind7上安装mysql记录: 1.下载的包中没有ini配置文件,需要根目录手动创建my.ini文件 内容如下: [client]port=3306default-character-set=utf ...
- C#整数类型
C#支持9种整数类型,sbyte,byte,short,ushort,int,uint,long,ulong和char. 类型 含义 ...
- wsl相关总结
启用WSL VirtualMachinePlatform是WSL2依赖功能,需要系统支持(build 18917+),硬件支持VM功能并开启,安装完成后要重启计算机. Enable-WindowsOp ...
- mqtt消息推送
https://github.com/wizinfantry/delphi-mqtt-clienthttps://github.com/Indemsys/Delphi_MQTT_mosquittoht ...
- Rainyday.js – Rendering Raindrops with JavaScript
Posted · Category:GPL License,Tools 直击现场 The idea behind Rainyday.js is to create a JavaScript libra ...