webpack ts-loader 错误：loaderContext.getOptions 不是函数

Question

我正在尝试将我的打字稿文件导入webpack，当我在终端中运行tsc 时一切正常，但是当我尝试在ts-loader 中使用编译我的打字稿代码时，会显示这个奇怪的错误：

ERROR in ./src/Main.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (D:\Projects\Real\AviUI\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (D:\Projects\Real\AviUI\node_modules\ts-loader\dist\index.js:14:21)

webpack 版本：4.43.0，ts-loader 版本：^9.2.3，loader-utils 版本：^1.4.0

webpack.config.js 文件：

module.exports = {
    entry: path.resolve(__dirname, './src/main.ts'),
    module: {
        rules: [ 
        {
            test: /\.ts$/,
            include: [source_path],
            loader: 'ts-loader',
            exclude: /node_modules/, 
        }],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'avi_ui.js',
        path: path.resolve(__dirname, 'dist')
    },
    externals: {
        'jquery': '`jquery`',
        'angular' : '`angular`'
    },
    mode: 'development'
};

注意：我尝试将我的 typescript 编译器更新到最新版本（当前最新版本是：4.3.3），但它对我不起作用。

Answer 1

正如 Ali Bigdeli 的回答所指出的，除了将 webpack 升级到 webpack 5 之外，还有另一种方法可以解决这个问题。您也可以将 ts-loader 降级到 8.2.0。使用您选择的包管理器，可能如下所示：

npm install ts-loader@~8.2.0

正如Github question 中指出的那样 由 Ali Bigdeli 链接，ts-loader 支持 webpack 4 的最后一个版本是 8.2.0，如果你想收到这个版本的补丁，你可以依赖 semver ~8.2.0 版本。

Answer 2

根据Github question 解决此问题的唯一方法是 将webpack 升级到 v5。
我从 webpack 官网找到了this 链接。升级版本最简单的方法是使用您的 javascript 包管理器，例如，如果您使用 npm 或 yarn，则可以使用以下终端代码：

# using npm 
$ npm install webpack@5.40.0
# using yarn
$ yarn add webpack@5.40.0

注意：目前webpack 的当前版本是5.40.0