TypescriptwithWebpack-你可能需要一個合適的加載器來處理這個檔案型別，目前沒有配置加載器來處理這個檔案

我在為 Typescript 和 React 配置 Webpack 時遇到問題。運行npm腳本后：webpack services ./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時，控制臺出現如下錯誤：

uj5u.com熱心網友回復：

所以我認為你的問題是你的 webpack 組態檔是用打字稿寫的。我認為你的 webpack 配置本身看起來不錯，但基本上你的 webpack 檔案告訴你的系統如何處理 typescript 檔案，但沒有告訴你的系統如何處理 webpack.config.ts 檔案。

一個快速測驗是洗掉組態檔中的一小部分打字稿并將其更改為 webpack.config.js 并查看是否有效。那么至少你已經確認了這個問題。

至于獲取 typescript 組態檔，您可能只需要安裝ts-node為 npm dev 依賴項。

這是通過https://webpack.js.org/configuration/configuration-languages/使用 typescript 組態檔的檔案

標籤：javascript 反应 打字稿 网页包

上一篇：為什么Webpack不需要我們匯入“Loaders”而“Plugins”需要我們匯入？

下一篇：找不到模塊：錯誤：無法決議現有模塊