typescript - ReferenceError: require non è definito nell'ambito del modulo ES

Ho aggiunto la configurazione di webpack 5 in questo modo nel progetto TypeScript:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry : {
    'index' : './index.ts', 
  } ,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
        '@': path.resolve(__dirname, '../../../src'),
    },
  },
  output : {
    path : path.resolve(__dirname, '../../bundle') ,
    filename : '[name].js'
  },
  module : {
    rules : [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        },
        include: [
          path.resolve(__dirname, '../../../node_modules/js-wheel'),
          path.resolve(__dirname, '../../../src')
        ],
        exclude: /node_modules|\.d\.ts$/
      }
    ]
  }
};

ma quando uso questo comando per costruire il progetto:

"build": "rm -rf dist && webpack --mode development --config src/config/webpack.config.js",

mostra errore:

[webpack-cli] ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/xxx/source/dwarf/frontend/js/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

come cambiare la configurazione di webpack per supportare ES6? Sto cercando su Google ma non ho trovato alcun indizio. È possibile trasformare la configurazione di webpack incompatibile con ES6?

Risposta n. 1

L'errore mostra che stai usando un modulo ES nel tuo progetto, ma le require sono il metodo di importazione CommonJS, quindi prova a usare il metodo di importazione del modulo ES in questo modo:

import webpack from 'webpack';

e esporta così:

export default {
  entry : {
    'index' : './index.ts', 
  } 
}