ts-loader 无法识别打字稿语法

Question

我有什么：

webpack.config.js：

位于项目根目录

//@ts-check

const path = require('path');
const webpack = require('webpack');


// module.exports = {
/**
 * @type {import('webpack').Configuration}
 */
const config = {
    // entry: './source/index.tsx',
    entry: './source/test.index.ts',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',                
                exclude: /node_modules/,
            },
            {
                test: /\.module.css$/,
                use: [
                    {
                        loader: "css-loader",
                        options: {
                            esModule: true,
                            // modules: {
                            //     namedExport: true, 
                            // },                            
                            modules: true, // Раз — и готово
                        },
                    },
                ],
            },
            {
                test: /\.(tsx|jsx|ts|js)?$/,
                use: "babel-loader",
                exclude: /node_modules/,
            }            
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx', '', '.*'],
        alias: {
            'react/hooks': 'preact/hooks',
            'react': 'preact/compat',
            'react-dom': 'preact/compat',
        },        
    },    
    output: {
        path: path.resolve(__dirname, 'dist\\webpack'),
        filename: 'webpack.bundle.js',
    },    
};

module.exports = config;

tsconfig.json：

也在根部

{
    "compilerOptions": {
        "target": "ES5",
        "outDir": "./release/built",
        "jsx": "react-jsx",
        "rootDir": "./",
        // "jsx": "preserve",
        "jsxImportSource": "preact",
        // "jsxFactory": "React.createElement",
        "allowJs": true,
        "strict": false,
        // "allowImportingTsExtensions": true,
        "esModuleInterop": true,        
        "moduleResolution": "Node",
        "module": "ES2020",
        "plugins": [
            {
                "name": "typescript-plugin-css-modules",
                "options": {
                    "classnameTransform": "dashes",
                    "customMatcher": "\\.module\\.css$",
                    // "customRenderer": "./myRenderer.js",
                    "dotenvOptions": {},
                    "postcssOptions": {},
                    "rendererOptions": {}
                }               
            }
        ],
        "skipLibCheck": true,
        "baseUrl": "./",        
        "paths": {
            "react": [
                "./node_modules/preact/compat/"
            ],
            "react/jsx-runtime": [
                "./node_modules/preact/jsx-runtime"
            ],
            "react-dom": [
                "./node_modules/preact/compat/"
            ],
            "react-dom/*": [
                "./node_modules/preact/compat/*"
            ]
        }       
    },
    "include": [
        // "./source/**/*",
        "./source/test.index.ts"
    ],
}

为了简化示例，我只有一个源代码文件

test.index.ts

放置在

source

目录 (

source/test.index.ts

) 中，内容如下：

let r: string = '44'
console.log(r)

使用这些配置我面临以下问题：

语法错误：缺少分号。 (1:5)

正如我之前很少读到的那样，经常会因为不正确的

include

/

exclude

选项而出现问题。但即使知道这一点，我也无法想象我的情况可能出了什么问题

Answer 1

重要的是要了解 Webpack 加载器是有序的，并且按从下到上的顺序运行。

ts-loader

虽然放在最前面，但实际上最后运行，因此

babel-loader

会抛出错误（因为它是第一个运行的）。

webpack 的订购文档。

---

在不相关的说明中，不存在

react/hooks

这样的东西，因此您可以删除该别名。它什么也没做。