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就会依据动态引入的性能进行打包