很多人应该像我一样,对于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???
要知道是什么,就上打印大法。
const context = require.context("./svg", true, /\.svg$/) // 看看你是何方神圣 console.log(context) context.keys().map(context)
下面就真的以一张图进行解释,有问题的欢迎留言交流呀!
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论