如何将commonJs require语法和es模块导入语法包含在同一捆绑包中-- webpack

在webpack中，可以通过使用一些特定的loader和插件来将commonJs require语法和es模块导入语法包含在同一捆绑包中。

首先，需要安装webpack和相关的loader和插件。可以使用以下命令进行安装：

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

接下来，需要在webpack配置文件中进行相应的配置。假设配置文件名为webpack.config.js，可以按照以下方式进行配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

上述配置中，entry指定了入口文件为src目录下的index.js，output指定了输出文件名为bundle.js，并且输出到dist目录下。module.rules中的配置使用babel-loader来处理.js文件，并且使用@babel/preset-env来转换ES6语法。

接下来，需要在项目根目录下创建一个.babelrc文件，用于配置Babel的转换规则。可以按照以下方式进行配置：

{
  "presets": ["@babel/preset-env"]
}

现在，可以在项目中使用commonJs require语法和es模块导入语法了。例如，在src目录下创建一个名为module1.js的文件，内容如下：

// commonJs require语法
const module2 = require('./module2');

// es模块导入语法
import module3 from './module3';

console.log(module2);
console.log(module3);

在上述代码中，使用了commonJs require语法导入了module2.js，并使用了es模块导入语法导入了module3.js。

最后，可以使用webpack命令进行打包，生成包含commonJs require语法和es模块导入语法的捆绑包。可以在命令行中执行以下命令：

npx webpack

执行完毕后，会在dist目录下生成一个bundle.js文件，该文件即为包含commonJs require语法和es模块导入语法的捆绑包。

这样，就实现了将commonJs require语法和es模块导入语法包含在同一捆绑包中的目标。