javascript - Typescript Webpack-თან ერთად - შესაძლოა დაგჭირდეთ შესაბამისი ლოუდერი ამ ფაილის ტიპის შესამუშავებლად, ამჟამად არ არის კონფიგურირებული ლოუდერები ამ ფაილის დასამუშავებლად

მე მაქვს პრობლემა Webpack-ის კონფიგურაციასთან TypeScript და React-ისთვის. 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, კონსოლში გამოჩნდება შემდეგი შეცდომა:

პასუხი #1

როდესაც ვფიქრობ, შენი პრობლემა აქ არის ის, რომ შენი webpack-ის კონფიგურაციის ფაილი დაწერილია TypeScript-ში. ვფიქრობ, შენი webpack კონფიგურაცია თავად კარგია, მაგრამ ძირითადად შენი webpack ფაილი უთითებს სისტემას როგორ უნდა მოეპყროს TypeScript ფაილებს, მაგრამ არაფერი უთითებს სისტემას როგორ უნდა მოეპყროს webpack.config.ts ფაილს.

ერთი სწრაფი ტესტი იქნებოდა თქვენი კონფიგურაციის ფაილში არსებული პატარა ტიპსკრიფტის ამოღება და მისი webpack.config.js-ზე შეცვლა და ნახვა, მუშაობს თუ არა ეს. შემდეგ მაინც გექნებათ პრობლემა დადასტურებული.

რაც შეეხება typescript კონფიგურაციის ფაილის მიღებას, თქვენ შესაძლოა საჭირო გახდნენ დაინსტალირება ts-node როგორც npm dev დამოკიდებულება.

აქ არის დოკუმენტაცია TypeScript კონფიგურაციის ფაილის გამოყენებისთვის: https://webpack.js.org/configuration/configuration-languages/