浅谈Webpack是如何打包CommonJS的

Webpack是一个JavaScript应用程序的打包工具，它能够把应用程序的多个模块打包成单一的JS文件。而CommonJS是一种模块化规范，可用于客户端和服务器端JavaScript环境。

在这里，我们详细讲解Webpack打包CommonJS模块的过程，以下是攻略：

1. 安装Webpack和CommonJS模块

在开始使用Webpack打包CommonJS模块之前，我们需要安装Webpack和CommonJS模块。可以使用以下命令安装：

npm install webpack --save-dev
npm install commonjs --save

2. 创建并配置Webpack配置文件

Webpack需要一个配置文件来确定打包方式和依赖项。我们首先需要创建一个名为webpack.config.js的文件夹。下面是一个基本的Webpack配置文件的示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在此示例中，我们通过entry属性指定了Webpack的入口点，以及通过output属性指定了打包后文件的输出目录和文件名。

3. 编写CommonJS模块示例

下面是一个用于示范的CommonJS模块的示例文件。我们将其命名为greeting.js。

module.exports = {
  sayHello(name) {
    return `Hello, ${name}!`;
  },

  sayGoodbye(name) {
    return `Goodbye, ${name}!`;
  }
};

在以上示例中，我们导出了一个包含两个方法的对象。这两个方法是sayHello和sayGoodbye。现在我们将这个模块导入到我们的Javascript应用程序中。

4. 在JavaScript应用程序中导入CommonJS模块

下面是一个JavaScript应用程序示例文件，我们将其命名为app.js。

const greeting = require('./greeting');

console.log(greeting.sayHello('张三')); // 输出 "Hello, 张三!"
console.log(greeting.sayGoodbye('李四')); // 输出 "Goodbye, 李四!"

在以上示例中，我们通过require()方法引入了我们刚才编写的CommonJS模块。然后，我们通过greeting.sayHello和greeting.sayGoodbye调用了模块中的方法。

5. 使用Webpack打包JavaScript应用程序

现在我们已经编写了JavaScript应用程序和CommonJS模块，我们可以使用Webpack将其打包为单个JavaScript文件来简化应用程序的管理。在命令行中，我们可以使用以下命令打包应用程序：

npx webpack

在打包后的文件中，可以看到所有模块已经被输出到一个名为bundle.js的文件中，可以在浏览器的控制台中查看打印输出结果。

以上就是使用Webpack打包CommonJS模块的完整过程。注意，在Webpack中打包CommonJS模块的过程中，使用的是Node.js中的CommonJS规范，而不是浏览器中的AMD规范。