自定义 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，但我真的很茫然。

所有其他文件类型都可以正常工作，我什至使用类似的格式导入 PNGs/SVGs...那么我这里做错了什么？

Answer 1

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

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

Custom Webpack loader can't parse custom language file

loader

webpack