Webpack & Typescript 图片导入

发布于02月18日

使用m&amp；React应用程序；Typescript.我想在<img/>个标签中使用一个图像.但是，我没有找到访问图像文件的正确方法.

webpack.config.js:

 ...
 module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]',
                }
            }
        ]

app.tsx:

...
render() {
    return <img src='/assets/logo-large.png' alt="logo"/>
}

运行应用程序时，找不到assets/logo-large.png资源.

安装网页包文件加载程序，添加声明.d、 ts，瞧！

在花了一些时间来找出解决方案后，这就是我所做的...

第一步

确保您已通过安装file-loader作为开发人员依赖项

npm install -D file-loader，如果你用Yarn yarn add -D file-loader

第二步

在Webpack rules webpack.config.js中添加与文件扩展名对应的加载程序，如下所示

module: {
    rules: [
      ...,
      {
        test: /\.(png|jpe?g|gif|jp2|webp)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },

第三步

在tsconfig.json文件旁边创建一个index.d.ts文件，实际上你可以随意命名，但你必须遵循步骤4.

由于Webpack现在将处理多个图像扩展，因此您可以添加file-loader支持的其他图像格式

declare module '*.png';
declare module '*.jpg';

第四步

转到tsconfig.json文件，将index.d.ts添加到include数组，如下所示:

{
  "compilerOptions": {
    ...,
    "jsx": "react",
    "esModuleInterop": true,
    "target": "ES2020",
    "moduleResolution": "node"
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["src", "index.d.ts"] /// <-- Like this!!
}

请注意，如果您没有定义include数组，那么typescript默认情况下将添加根文件夹中的所有文件，如果您只定义一个文件，而不是包含所有代码的文件，那么它不会编译.我认为将所有代码都放在src文件夹中是一种很好的做法.

瞧！！