javascript - 使用 TypeScript + Webpack 导入 svgs

Question

我有一个非常简单的 Webpack + TypeScript 设置，我正在尝试导入 svgs。我正在使用 svg-sprite-loader 如果我 require() 我的 svgs 如下所示，它会很好地工作:

require('./assets/alert.svg')

--

但是，我更愿意使用以下内容:

import alert from './assets/alert.svg'

有了这个，我得到了以下错误:

TS2307: Cannot find module './assets/alert.svg'.

我的项目根目录中有一个 custom.d.ts 文件(阅读后:https://webpack.js.org/guides/typescript/#importing-other-assets)。它看起来像这样:

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

我的 tsconfig 看起来像:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

最后，我的 webpack 设置包括:

 module: {
   rules: [
       {
           test: /\.ts$/,
           use: `awesome-typescript-loader`
       },
       {
           test: /\.html$/,
           loader: 'html-loader'
       },
       {
           test: /\.svg$/,
           loader: 'svg-sprite-loader'
       }
   ]
 }

我试图了解 custom.d.ts 文件是如何发挥作用的。我需要在我的 tsconfig 中添加什么吗？

此外，对于版本，我正在使用:

• Webpack @ 2.5.0
• TypeScript @ 2.4.0
• svg-sprite-loader @ 3.6.2
• awesome-typescript-loader @ 3.1.2

Answer 1

尝试添加

"files": [ 
  "custom.d.ts" 
]  

到你的 tsconfig.json