将图像与 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 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.dev.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",
      },
    }),
  ],
};

webpack.prod.ts

import webpack from "webpack";

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

webpack.config.ts

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);
};

另外，我的.babelrc 文件：

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

和tsconfig.json:

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

package.json 中的脚本：

"scripts": {
  "start": "webpack serve --config config/webpack.config.ts --env env=dev --hot",
  "build": "webpack --config config/webpack.config.ts --env env=prod",
},

如果您能提供任何解决问题的提示，我将不胜感激。

Answer 1

感谢这里收到的帮助：https://github.com/webpack/webpack/issues/12276#event-4152056913，我已经通过更改传递给我的webpack.common.ts 文件中的ForkTsCheckerWebpackPlugin 的选项来克服错误覆盖。

之前：

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

现在：

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