Как запустить и собрать typescript с помощью webpack?

Question

historydev @historydev

Редактирую файлы с непонятными расширениями

Как запустить и собрать typescript с помощью webpack?

Я до этого собирал tsc не было проблем, стоял commonjs, при этом я использовал не require, а import, в доках веб пака написано что я должен изменить commonjs на es, я установил es6 модуль и es5 таргет:

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "exclude": [
        "node_modules"
    ]
}

webpack.config.js

module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js', '.json'],
},
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
};

Ошибка при запуске webpack-dev-server

PS C:\Users\User\Desktop\project\test> npm run develop

> test@1.0.0 develop
> webpack-dev-server --mode development

[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: localhost:8080
[webpack-dev-server] On Your Network (IPv4): 192.168.0.101:8080
[webpack-dev-server] Content not from webpack is served from 'C:\Users\User\Desktop\project\test\public' directory
asset bundle.js 571 KiB [emitted] (name: main)
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 160 KiB
modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
modules by path ./node_modules/webpack/hot/*.js 4.59 KiB
./node_modules/webpack/hot/dev-server.js 1.88 KiB [built] [code generated]
./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
+ 2 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
+ 2 modules
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/index.ts 143 bytes [built] [code generated]

ERROR in ./src/index.ts 1:0-25
Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\Desktop\project\test\src'
resolve 'fs' in 'C:\Users\User\Desktop\project\test\src'
Parsed request is a module
using description file: C:\Users\User\Desktop\project\test\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
C:\Users\User\Desktop\project\test\src\node_modules doesn't exist or is not a directory
looking for modules in C:\Users\User\Desktop\project\test\node_modules
single file module
using description file: C:\Users\User\Desktop\project\test\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\test\node_modules\fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\test\node_modules\fs.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\test\node_modules\fs.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\test\node_modules\fs.json doesn't exist
C:\Users\User\Desktop\project\test\node_modules\fs doesn't exist
looking for modules in C:\Users\User\Desktop\project\node_modules
single file module
using description file: C:\Users\User\Desktop\project\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\node_modules\fs doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\node_modules\fs.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\node_modules\fs.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\User\Desktop\project\node_modules\fs.json doesn't exist
C:\Users\User\Desktop\project\node_modules\fs doesn't exist
C:\Users\User\Desktop\node_modules doesn't exist or is not a directory
C:\Users\User\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory

webpack 5.75.0 compiled with 1 error in 1580 ms

index.ts

import * as fs from "fs";
import {AModel} from "./models/a/a.model";

const a: AModel = {
    a: JSON.parse(fs.readFileSync(__dirname + '/test.json').toString()),
    b: 1
};

console.log(a);

Я не понимаю почему не работает импорт, я искал информацию, везде либо package.json - type=module, либо в tsconfig commonjs, но веб пак требует не commonjs. Как мне быть?