昨天有事，没空学代码，今天早上接着学习，没想到刚开始就又遇到一些问题：
今天在我给页面引入icon的时候，想着要用什么办法呢？雪碧图？图片？不行，还是用点稍微新一点的技术吧，所以决定使用SVG symbols，怎么使用呢？开查！
经过了查找，发现SVG Symbols的使用难点在于需要自定义webpack config。
于是继续看文档，步骤如下： 首先
yarn eject
这时候，目录里面就会多出一个config的目录，这时候记得先commit一下，以防有问题可以回滚。
然后，根据svg-sprite-loader文档，进行依赖安装，并且把所需的配置文件：
{
test: /.svg$/,
loaders: [
`svg-sprite-loader?${JSON.stringify({ ... })}`,
'svg-transform-loader',
'svgo-loader'
]
}
放到webpack.config.js里面，再次commit，这个时候就可以直接使用svg-symbols了。
接下来，由于可能会需要使用到好几个icon，而且后续可能还会继续引用，所以我就想着去把icon封装起来。
封装的时候倒是顺利地写出来了：
但是这样做的时候又有一个问题，我现在的项目只有十个以内的icon，要是以后需要大量的icon那该怎么办呢？
抱着这个疑问，Google上面探索，经过了半个小时的艰难英文阅读和搜索之后，终于找到一个通用的办法，上代码：
let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {
importAll(require.context('icons', true, /.svg$/));
} catch (error) {
console.log(error);
}
写上这些代码之后，果不其然还是有报错， __WebpackModuleApi和context飘红，这又是为啥呢？
接着开搜！
我在Google上输入typescript __WebpackModuleApi之后，很顺利的找到了一个感觉是正确的回答：
于是我就引入了相应依赖：
yarn add --dev @types/webpack-env
引入后，果然就没有报错了，至此，这个小问题就解决了，虽然看似很简单，但是学习过程中能学到这些并记录下来能让我在以后工作的时候遇到问题很快就能知道怎么解决~~
