将 TypeScript 项目与 Webpack 捆绑时，Node.js 提示“ReferenceError: require is not Define”

我有一个简单的test.ts我想使用 webpack 捆绑的文件。该文件包含一些代码和以下导入，没有任何错误：

import { from, interval, Observable, of, pipe, Subject, timer, BehaviorSubject, zip, EMPTY } from 'rxjs/index.js'
import { filter, map, mergeMap, delay, concatMap, concatMapTo, concatAll, toArray, catchError, retry, retryWhen, delayWhen, tap, take, switchMap, repeat, scan, withLatestFrom, reduce, expand, exhaustMap, mapTo } from 'rxjs/operators/index.js'
import axios from 'axios'
import cheerio from 'cheerio'
import chalk from 'chalk'

这是我的内容package.json file:

{
  "name": "myproject",
  "version": "0.0.1",
  "description": "",
  "private": "true",
  "type": "module",
  "scripts": {
    "test": "tsc && node dist/test.js",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^14.14.39",
    "axios": "^0.21.1",
    "chalk": "^4.1.1",
    "cheerio": "^1.0.0-rc.6",
    "rxjs": "^6.6.7",
    "telegraf": "^4.3.0"
  },
  "devDependencies": {
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0"
  }
}

The tsconfig.json文件看起来像这样：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2016",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "es2015",                          /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "allowJs": true,                             /* Allow javascript files to be compiled. */
    "checkJs": true,                             /* Report errors in .js files. */
    "sourceMap": true,                           /* Generates corresponding '.map' file. */
    "outDir": "./dist",                          /* Redirect output structure to the directory. */
    "rootDir": "./src",                          /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */

    /* Strict Type-Checking Options */
    "strict": true,                              /* Enable all strict type-checking options. */

    /* Module Resolution Options */
    "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "esModuleInterop": true,                     /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    /* Advanced Options */
    "skipLibCheck": true,                        /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true     /* Disallow inconsistently-cased references to the same file. */
  },
  "exclude": ["./dist/**/*"]
}

编译项目时，我收到以下消息：

无法写入文件“d:/asant/Desktop/myproject/webpack.config.js”，因为它会覆盖输入文件。

这就是webpack.config.js file:

const path = require('path')

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

当。。。的时候build运行脚本会输出：

[webpack-cli] Failed to load 'D:\asant\Desktop\myproject\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined
    at file:///D:/asant/Desktop/myproject/webpack.config.js:1:14
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async loadConfig (D:\asant\Desktop\myproject\node_modules\webpack-cli\lib\webpack-cli.js:1346:35)
    at async WebpackCLI.resolveConfig (D:\asant\Desktop\myproject\node_modules\webpack-cli\lib\webpack-cli.js:1454:38) 
    at async WebpackCLI.createCompiler (D:\asant\Desktop\myproject\node_modules\webpack-cli\lib\webpack-cli.js:1839:22)
    at async WebpackCLI.buildCommand (D:\asant\Desktop\myproject\node_modules\webpack-cli\lib\webpack-cli.js:1954:20)  
    at async Command.<anonymous> (D:\asant\Desktop\myproject\node_modules\webpack-cli\lib\webpack-cli.js:735:25)       
    at async Promise.all (index 1)
    at async Command.<anonymous> (D:\asant\Desktop\myproject\node_modules\webpack-cli\lib\webpack-cli.js:1284:13)      
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] /cdn-cgi/l/email-protection build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\asant\AppData\Roaming\npm-cache\_logs\2021-05-01T14_28_01_191Z-debug.log
The terminal process "C:\WINDOWS\System32\cmd.exe /d /c npm run build" terminated with exit code: 2.

也在运行test将输出：

error TS5055: Cannot write file 'D:/asant/Desktop/myproject/webpack.config.js' because it would overwrite input file.

error TS6059: File 'D:/asant/Desktop/myproject/webpack.config.js' is not under 'rootDir' 'D:/asant/Desktop/myproject/src'. 'rootDir' is expected to contain all source files.
  The file is in the program because:
    Matched by include pattern '**/*' in 'D:/asant/Desktop/myproject/tsconfig.json'


Found 2 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] /cdn-cgi/l/email-protection test: `tsc && node dist/test.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\asant\AppData\Roaming\npm-cache\_logs\2021-05-01T14_29_07_580Z-debug.log
The terminal process "C:\WINDOWS\System32\cmd.exe /d /c npm run test" terminated with exit code: 1.