reactjs - 模块解析失败 : Unexpected character '@' You may need an appropriate loader to handle this file type. (Webpack : 4. 4.0)

Question

我在迁移 webpack 时收到此错误。下面是我的 webpack.config.js。我还附上了错误截图。请查收附件。

我已经添加了 sass-loader，css-loader，style-loader。如果我做错了什么，请告诉我。

不知道是什么错误......预先感谢您的帮助 Webpack.config.js

 const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const CleanWebpackPlugin = require("clean-webpack-plugin");

    const settings = {
      distPath: path.join(__dirname, "dist"),
      srcPath: path.join(__dirname, "src")
    };


    function srcPathExtend(subpath) {
      return path.join(settings.srcPath, subpath)
    }

    module.exports = (env, options) => {
      const isDevMode = options.mode === "development";

      return {
        devtool: isDevMode ? "source-map" : false,
        resolve: {
          extensions: [".ts", ".tsx", ".js"],
        },
        module: {
          rules: [
            {
              test: /\.tsx?$/,
              use: ["babel-loader", "ts-loader", "tslint-loader"]
            },
            {
              test: /\.scss$/,
              use: [
                "style-loader",
                {
                  loader: "css-loader",
                  options: {
                    sourceMap: isDevMode
                  }
                },
                {
                  loader: "postcss-loader",
                  options: {
                    plugins: [
                      require("autoprefixer")()
                    ],
                    sourceMap: isDevMode
                  }
                },
                {
                  loader: "sass-loader",
                  options: {
                    sourceMap: isDevMode
                  }
                }
              ]
            },
            {
              test: /\.(ttf|eot|woff|woff2)$/,
              use: {
                loader: "file-loader",
                options: {
                  name: "fonts/[name].[ext]",
                },
              },
            },
            {
              test: /\.(jpe?g|png|gif|svg|ico)$/i,
              use: [
                {
                  loader: "file-loader",
                  options: {
                    outputPath: "assets/"
                  }
                }
              ]
            },
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: [
                'babel-loader'
              ]
            }

          ]
        },
        plugins: [
          new CleanWebpackPlugin([settings.distPath], {
            verbose: true
          }),
          new HtmlWebpackPlugin({
            template: srcPathExtend("index.ejs")
          })
        ]
      };
    };

Answer 1

替换这个

{
  test: /\.(ttf|eot|woff|woff2)$/,
     use: {
       loader: "file-loader",
         options: {
         name: "fonts/[name].[ext]",
     },
  },
}

使用此代码

{
  test: /\.(woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000'
}

首先安装url-loader包