从零开始构建自己的 Webpack：新手入门指南

准备就绪

首先，让我们创建一个新的项目。在这个项目中，我们将包含两个文件夹：webpack-project 和 mn-webpack。webpack-project 将用于观察打包结果，而 mn-webpack 将用于简单实现 Webpack。

1. 创建项目

   mkdir webpack-project
   mkdir mn-webpack
   

2. 进入 webpack-project

   cd webpack-project
   

3. 创建 src 文件夹

   mkdir src
   

4. 创建 webpack.config.js 文件

   touch webpack.config.js
   

5. 进入 mn-webpack

   cd ../mn-webpack
   

搭建 Webpack

接下来，让我们在 mn-webpack 中搭建一个简单的 Webpack。

1. 安装依赖

   npm install --save-dev webpack webpack-cli
   

2. 创建 index.js 文件

   touch index.js
   

3. 在 index.js 中写入以下代码

   console.log('Hello, world!');
   

4. 创建 webpack.config.js 文件

   touch webpack.config.js
   

5. 在 webpack.config.js 中写入以下代码

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

运行 Webpack

现在，我们可以运行 Webpack 来打包我们的代码。

1. 在 mn-webpack 中

   npx webpack
   

2. 在 webpack-project 中

   open dist/bundle.js
   

您应该会看到以下输出：

Hello, world!

总结

恭喜您！您已经成功构建了一个简单的 Webpack。通过这个过程，您已经学习了如何创建 Webpack 项目，配置 Webpack，并运行 Webpack 来打包代码。现在，您可以继续探索 Webpack 的更多高级功能，例如模块化、加载器、插件等。