自定义 Webpack 加载器无法解析自定义语言文件

Question

我的 Webpack 配置：

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const sass = require("sass");

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        static: "./dist",
        hot: true
    }
    entry: "./src/index.tsx",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: sass,
                            sassOptions: {
                                fiber: false
                            }
                        }
                    }
                ],
                exclude: "/node_modules/"
            },
            {
                test: /\.tsx$/,
                use: [
                    {
                        loader: "ts-loader"
                    },
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-typescript", "@babel/react", "@babel/env"],
                        }
                    }
                ],
                exclude: "/node_modules/"
            },
            {
                test: /\.lang$/,
                type: "asset/source",
                exclude: "/node_modules/"
            }
        ]
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx"]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            inject: true
        })
    ]
};

我得到的错误：

ERROR in ./src/impl/text/language.ts 3:27
Module parse failed: Unexpected token (3:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import * as enUS from "lang/en-US.lang";
|
> const parseLanguage = (lang: string) => {
|     console.log(lang);
|     const values: { [key: string]: string } = {};
 @ ./src/components/App.tsx 2:0-52 6:15-26
 @ ./src/index.tsx 3:0-39 4:36-39

webpack 5.65.0 compiled with 1 error in 2854 ms

我在让 Typescript 运行良好时遇到了很多问题，现在我无法弄清楚为什么 Webpack 会出现这个问题。我要导入的文件名为en-US.lang。除了尝试各种加载器（raw-loader、file-loader...）之外，我还尝试过使用asset/resource 和asset/inline，但我真的很茫然。

所有其他文件类型都可以完美运行，我什至使用类似的格式导入了 PNG/SVG……那我在这里做错了什么？

Answer 1

长话短说，要导入的文件在 Typescript（不是 tsx）文件中，我需要包含在 Webpack TS 加载器中