webpack ts-loader错误: loaderContext.getOptions不是一个函数

Question

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

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

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

Answer 2

根据Github的问题，解决这个问题的唯一方法是将webpack升级到v5。

我在webpack官网上找到了this链接。升级版本最简单的方法是使用你的javascript包管理器，例如，如果你使用npm或yarn，可以使用以下终端代码：

#using npm 
$ npm install webpack@5.40.0
#using yarn
$ yarn add webpack@l5.40.0

注意:此时webpack的当前版本为5.40.0