webpack+TS配置svg-sprite-loader

本文是对Icon使用svg图标的一个配置讲解,是本人在写Icon组件的时候,其中需要用到的配置进行总结

svg-sprite-loader

---

首先在webpack.config.js中配置如下代码

    {
      test: /\.svg$/, // 找到所有的svg
      loader: 'svg-sprite-loader', // 使用svg-sprite-loader
    },

当配置完毕重新启动,在使用svg的地方导入svg,会发现编译报如下错误:

为什么会出现这个错误?
首先怀疑我们的TS没有配置svg相关的操作
在TS中添加配置如下,但是发现报错依旧

declare module '*.svg' {
  const content: any;
  export default content;
}

是不是我的tsconfig.json文件里里面需要配置什么东西?
开始不停地尝试网上的配置
最后在文件中添加如下

"include": [
    "lib/**/*"
  ],

找到了svg,报错发生改变,说我没有使用

用console.log打出来发现已经可以使用了
目录是匹配了,但是我们还没有下载svg-sprite-loader

yarn add svg-sprite-loader

下载之后重新启动,完成,nice

总结:

"include": [
    "lib/**/*"
  ],

1. 上面这段代码是告诉TS,lib这个文件下面的所有都是我的源文件,这样TS就会去查找源文件,自动进行编译
2. **这两个星星的意思是lib下面的所有目录都会匹配

declare module '*.svg' {
  const content: any;
  export default content;
}

1. 这个配置是否还有作用,答案是:有用的.下面这两种写法是不一样的,第二种写法,就需要export default一个东西,而上面的配置就是用来支持第二种写法的

import '../icons/wechat.svg'
import wechat from '../icons/wechat.svg'

小插曲: tree-shaking

1. 什么叫做tree-shaking技术?
   答: 我们引入多个库的时候,只使用每个库到其中的几个功能,我们打包之后,会将使用到的功能打包起来,而没使用到的会被删除掉,这就是tree-shaking技术
2. tree-shaking依赖于什么?
   答:它依赖于静态引入(按需引入),我们需要什么功能就引入什么功能,tree-shaking就会根据静态引入的功能进行打包