使用 Webpack 的加载器捆绑图像时出现“解析错误：无效字符”

Question

当我尝试捆绑我的 React 项目时，我收到有关我要加载的图像的以下错误：

奇怪的是，当我隐藏错误覆盖时，我可以在浏览器中看到我的图片已正确加载，尽管 Webpack 抱怨。我已经仔细遵循其他工作配置示例，其中不会出现该问题，但我无法轻松识别问题的根源，是什么让我不知道如何处理它或在哪里寻找暗示。我也尝试过不同的加载器：url-loader、file-loader和image-webpack-loader，但无济于事。也许这就是 Typescript 造成这些麻烦的原因？

App.tsx我导入图像的位置：

import "./app.d";
import React from "react";
import SampleImage from "./assets/images/sample-image.jpg";

const App: React.FC = () => (
  <div>
    <img src={SampleImage} />
  </div>
);

export default App;

app.d.ts带有模块声明以允许导入打字稿文件中的资源：

declare module "*.jpeg";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";

webpack.common.ts- 我的主要 Webpack 配置文件，我将 和 都放置url-loader在file-loader弹出的 create-react-app 配置中，但它并没有真正改变任何内容：

import "./app.d";
import React from "react";
import SampleImage from "./assets/images/sample-image.jpg";

const App: React.FC = () => (
  <div>
    <img src={SampleImage} />
  </div>
);

export default App;

webpack.dev.ts

declare module "*.jpeg";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";

webpack.prod.ts

import path from "path";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";

module.exports = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
            },
          },
        ],
      },
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.(ts|tsx)$/,
          /\.css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
        ],
        loader: require.resolve("file-loader"),
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
        include: path.resolve(__dirname, "..", "./src/assets"),
      },

      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve("url-loader"),
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
        include: path.resolve(__dirname, "..", "./src/assets"),
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "..", "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.resolve(__dirname, "..", "./dist"),
    hot: true,
    compress: true,
    open: true,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "React App",
      template: path.resolve(__dirname, "..", "./src/index.html"),
    }),
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: path.resolve(__dirname, "..", "./src/**/*"),
      },
    }),
  ],
};

webpack.config.ts

import webpack from "webpack";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
              plugins: [require.resolve("react-refresh/babel")],
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockIntegration: "wds",
      },
    }),
  ],
};

另外，我的.babelrc文件：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "react-refresh/babel",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

和tsconfig.json：

import webpack from "webpack";

module.exports = {
  mode: "production",
  devtool: "source-map",
};

脚本位于package.json：

import merge from "webpack-merge";
import devConfig = require("./webpack.dev");
import prodConfig = require("./webpack.prod");
import commonConfig = require("./webpack.common");

module.exports = ({ env }: { env: "dev" | "prod" }) => {
  const envConfig = env === "dev" ? devConfig : prodConfig;

  return merge(commonConfig, envConfig);
};

如果有任何关于如何解决该问题的提示，我将非常感激。

Answer 1

感谢此处收到的帮助： https: //github.com/webpack/webpack/issues/12276#event-4152056913ForkTsCheckerWebpackPlugin ，我通过更改传递给我的文件中的选项成功地超越了错误覆盖webpack.common.ts。

前：

new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: path.resolve(__dirname, "..", "./src/**/*"),
      },
    }),

现在：

new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: path.resolve(__dirname, "..", "./src/**/*.{ts,tsx,js,jsx}"),
      },
    }),