webpackTS配置svgspriteloader

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