带有 Webpack 的 Typescript - 你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件

Question

我在为 Typescript 和 React 配置 Webpack 时遇到问题。运行ning npm脚本后：webpack serves ./webpack/webpack.config.ts --open，控制台出现如下错误

配置文件如下：

webpack.config.ts

import path from "path";
import { Configuration, ProvidePlugin } from "webpack";
import * as webPackDevServer from 'webpack-dev-server'

import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'

const config: Configuration = {
    context: __dirname,
    mode: 'development',
    entry: '../src/index.tsx',
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react",
                            "@babel/preset-typescript",
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(woff|woff2|ttf|eot|png|jpg|svg|gif)$/i,
                use: ['file-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    },
    plugins: [
        new ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new MiniCssExtractPlugin({
            filename: "index.css"
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "..", "./public/index.html")
        }),
        new ForkTsCheckerWebpackPlugin()
    ],
    devServer: {
        static: path.join(__dirname, "..", "build"),
        compress: true,
        port: 8000
    }
}

export default config

tsconfig.json

    {
    "compilerOptions": {
        "module": "ES6",
        "target": "ES5",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ESNext"
        ],
        "moduleResolution": "node",
        "esModuleInterop": true,
        "strict": true,
        "allowJs": true,
        "noEmit": true,
        "isolatedModules": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "forceConsistentCasingInFileNames": true,
        "jsx": "react-jsx"
    },
    "include": [
        "src/**/*"
    ]
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}

.eslintrc.json

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2015,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "react-hooks"
    ],
    "extends": [
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/prop-types": "off"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }
}

文件结构

可能与包路径有关，如我运行命令webpack时，控制台出现如下错误：

Answer 1

所以我认为你的问题是你的 webpack 配置文件是用打字稿写的。我认为你的 webpack 配置本身看起来不错，但基本上你的 webpack 文件告诉你的系统如何处理打字稿文件，但没有告诉你的系统如何处理 webpack.config.ts 文件。

一个快速测试是删除配置文件中的一小部分打字稿并将其更改为 webpack.config.js 并查看是否有效。那么至少你已经确认了问题。

至于获取 typescript 配置文件，您可能只需要安装 ts-node 作为 npm dev 依赖项。

这里是使用 typescript 配置文件的文档 https://webpack.js.org/configuration/configuration-languages/

带有 Webpack 的 Typescript - 你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件

Typescript with Webpack - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

javascript

typescript

reactjs

webpack