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

2021-12-01 11:09:59 浏览数 (1)

前言

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

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

战前准备

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

初始化

  1. 创建项目目录
代码语言：javascript复制
mkdir webpackmini
  1. 安装webpack依赖
代码语言：javascript复制
yarn add webpack -D

or

代码语言：javascript复制
npm install webpack -D
  1. 安装webpack-cli依赖 这里，稍微注意一下，我们可以下载这个版本的，最新版的安装之后好像不可用。
代码语言：javascript复制
yarn add webpack-cli@3.3.12 -D

or

代码语言：javascript复制
npm install webpack@3.3.12 -D

创建入口文件

  1. 创建项目主目录
代码语言：javascript复制
mkdir src
  1. 创建入口文件
代码语言：javascript复制
touch main.js
  1. 编辑入口文件

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

代码语言：javascript复制
console.log('maomin1');

创建编辑webpack 配置文件

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

代码语言：javascript复制
touch webpack.config.js

并编辑。

代码语言：javascript复制

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文件，会看到以下代码：

代码语言：javascript复制
/*
 * 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');nn//# 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"]();
/******/  
/******/ })()
;

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

代码语言：javascript复制
(() => {
 var __webpack_modules__ = ({
        "./src/main.js":
        (() => {eval("console.log('maomin1');nn//# sourceURL=webpack://webpackmini/./src/main.js?");})
 });

 var __webpack_exports__ = {};
 __webpack_modules__["./src/main.js"]();
})();

准备实战

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

  1. 首先我们在项目根目录下创建一个文件夹。
代码语言：javascript复制
mkdir maominpack
  1. 然后，在maominpack文件夹下创建一个bin文件夹
代码语言：javascript复制
mkdir bin
  1. 最后在bin文件夹下创建一个maominpack.js文件

编辑如下：

代码语言：javascript复制
#!/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文件下编辑如下：
代码语言：javascript复制
{
  "name": "maominpack",
  "version": "1.0.0",
  "bin":{
    "maominpack":"bin/maominpack.js"
  },
  "main": "index.js",
  "license": "MIT"
}
  1. 为其命令创建快捷方式
代码语言：javascript复制
npm link
  1. 为其配置在其他目录也可使用此命令
代码语言：javascript复制
npm config ls
  1. 验证打包

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

代码语言：javascript复制
console.log('maomin2');

然后，键入命令：

代码语言：javascript复制
maominpack

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

代码语言：javascript复制

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

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

webpack 打包 javascript 编程算法

0 人点赞