首先我们说一下require和import的这两个引入文件的方式
    import 引入文件，需要调用，才能引用到
    下面举个例子

    1. import icon from './icon.svg'
    2. <svg>
    3.   <use xlinkHref="#id" />
    4. </svg>

    如果只向上述代码那样写的话，源代码中不会出现像下面的代码
    require方式遍历引入文件 - 图1
    只有像这样引用，svg symbol 才能被引入到文档中

    1. import icon from './icon.svg'
    2. console.log(icon) //此处引用了icon
    3. <svg>
    4.   <use xlinkHref="#id" />
    5. </svg>

    解释一下

    主要是因为Tree Shaking，如果使用import 引入文件，却没有使用，那么就会相当于没有引入，是个废代码。然而require却不受Tree Shaking，使用require的引用方式就能够成功的引入文件。

    所以，此时就换require的引用方式。

    1. require('./icon.svg') //这种方式成功的引入
    2. <svg>
    3.   <use xlinkHref="#id" /> 
    4. </svg>

    但是如果有很多很多的svg这类的文件，一个一个的引入就会非常的累，于是使用遍历的方式，遍历目录里面的文件，具体代码如下

    1. let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
    2. try {importAll(require.context('icons', true, /\.svg$/));} catch (error) {console.log(error);}
    • icons这个参数，填写你想要遍历的目录
    • true 这个属性值，表示是否要开启深度遍历
    • /.svg$/这个参数，表示以什么格式结尾的文件

    虽然引入上面的代码没什么问题，但是在编辑器里面还是会报错，此时应该是webpack的环境提示啥的没有安装，导致编辑器里面没法找到正确的API，于是只需要安装一下这个包。

    1. yarn add --dev @type/webpack-env

    解决问题，就很nice！