使用Webpack和Babel将ES Modules代码转换为CommonJS代码的配置

前言

在现代的JavaScript开发中，使用ES Modules（ESM）已经成为一种常见的模块化方案。然而，有些情况下，我们可能需要将ES Modules代码转换为CommonJS（CJS）代码，以便在旧版本的Node.js或其他环境中使用。Webpack和Babel是两个非常强大的工具，可以帮助我们实现这个转换过程。

本文将介绍如何使用Webpack和Babel将ES Modules代码转换为CommonJS代码，并提供相应的配置项。

步骤

步骤1：安装依赖

首先，我们需要安装一些必要的依赖项。在项目根目录下执行以下命令：

npm install webpack babel-loader @babel/core @babel/preset-env

步骤2：创建Webpack配置文件

在项目根目录下创建一个名为webpack.config.js的文件，并添加以下内容：

module.exports = {
   
  entry: './src/index.js',
  output: {
   
    filename: 'bundle.js',
    path: __dirname + '/dist',