今天，我们来实现一个基础版的webpack

怼烎@ 2021-09-09 03:06 304阅读 0赞

## 前言 ##

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

这是官网对webpack的解释。提到模块，模块顾名思义是独立的JS文件。与之相近的词模块化，通俗的讲就是我们平时组织和管理代码方法的一种实现。

## 战前准备 ##

我们先来测试一下webpack的打包。

### 初始化 ###

1.  创建项目目录

mkdir webpackmini

1.  安装webpack依赖

yarn add webpack -D

npm install webpack -D

1.  安装webpack-cli依赖  
    这里，稍微注意一下，我们可以下载这个版本的，最新版的安装之后好像不可用。

yarn add webpack-cli@3.3.12 -D

npm install webpack@3.3.12 -D

### 创建入口文件 ###

1.  创建项目主目录

mkdir src

1.  创建入口文件

touch main.js

1.  编辑入口文件

我们这里使用最简单的一行代码。

console.log('maomin1');

### 创建编辑webpack 配置文件 ###

在项目根目录下键入命令：

touch webpack.config.js

并编辑。

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

### 运行测试打包 ###

我们这里使用 `npx webpack` 命令进行打包。打包成功！

我们来到打包好的`bundle.min.js`文件，会看到以下代码：

/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */
    /******/ (() => {  // webpackBootstrap
    /******/ 	var __webpack_modules__ = ({ 
    
    /***/ "./src/main.js":
    /*!*********************!*\ !*** ./src/main.js ***! \*********************/
    /***/ (() => { 
    
    eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");
    
    /***/ })
    
    /******/ 	});
    /************************************************************************/
    /******/ 	
    /******/ 	// startup
    /******/ 	// Load entry module and return exports
    /******/ 	// This entry module can't be inlined because the eval devtool is used.
    /******/ 	var __webpack_exports__ = { };
    /******/ 	__webpack_modules__["./src/main.js"]();
    /******/ 	
    /******/ })()
    ;

我们将注释删掉后，会精简不少！

(() => { 
    	var __webpack_modules__ = ({ 
            "./src/main.js":
            (() => { eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");})
    	});
    
    	var __webpack_exports__ = { };
    	__webpack_modules__["./src/main.js"]();
    })();

## 准备实战 ##

开始实战实现一个基础版的webpack。

1.  首先我们在项目根目录下创建一个文件夹。

mkdir maominpack

1.  然后，在`maominpack`文件夹下创建一个`bin`文件夹

mkdir bin

1.  最后在`bin`文件夹下创建一个`maominpack.js`文件

编辑如下：

#!/usr/bin/env node
    const fs = require('fs');
    const ejs = require('ejs');
    const config = require('../../webpack.config.js');
    
    const entry = config.entry;
    const output = `${ config.output.path}\/${ config.output.filename}`;
    const content = fs.readFileSync(entry,'utf8');
    
    let template = ` (() => { var __webpack_modules__ = ({ "<%-entry%>": (() => { eval("<%-content%>"); }) }); var __webpack_exports__ = {}; __webpack_modules__["<%-entry%>"](); })() ; `
    
    let package = ejs.render(template,{ 
        entry,
        content
    });
    
    fs.writeFileSync(output,package);

首先，我们在头部指定环境为node环境，并且引入fs模块。然后，我们引入了`ejs`依赖，如果不是很了解`ejs`的，可以去官网浏览下。这里就简单的介绍一下。

> “E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

我们看到在将带有绑定值的字符串赋值给`template`变量，我们这里使用的`ejs.render()`，第一个参数是需要处理的字符串，第二个参数使我们需要修改的值，是一个对象。

1.  在`package.json`文件下编辑如下：

{ 
      "name": "maominpack",
      "version": "1.0.0",
      "bin":{ 
        "maominpack":"bin/maominpack.js"
      },
      "main": "index.js",
      "license": "MIT"
    }

1.  为其命令创建快捷方式

npm link

1.  为其配置在其他目录也可使用此命令

npm config ls

1.  验证打包

我们将`src/main.js`修改一下。

console.log('maomin2');

然后，键入命令：

maominpack

最后，检查一下`bundle.min.js`:

(() => {  
        var __webpack_modules__ = ({ 
        
        "./src/main.js":
        (() => { 
        
        eval("console.log('maomin2');");
        
        })
        
             });
             var __webpack_exports__ = { };
             __webpack_modules__["./src/main.js"]();
             
         })()
        ;

发现，我们打包成功了。这里我们只是实现了最基础的字符串替换打包功能，webpack还有很多值得玩的特性。

## 关于作者 ##

作者：**Vam的金豆之路**。曾获得2019年CSDN年度博客之星，CSDN博客访问量已达到数百万。掘金博客文章多次推送到首页，总访问量已达到数十万。

另外，我的公众号：`前端历劫之路`，公众号持续更新最新前端技术及相关技术文章。欢迎关注我的公众号，让我们一起在前端道路上历劫吧！Go！