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

开发 前端
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。提到模块,模块顾名思义是独立的JS文件。与之相近的词模块化,通俗的讲就是我们平时组织和管理代码方法的一种实现。

[[412320]]

前言

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

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

战前准备

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

1.初始化

创建项目目录

  1. mkdir webpackmini 

2.安装webpack依赖

  1. yarn add webpack -D 

or

  1. npm install webpack -D 

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

  1. yarn add webpack-cli@3.3.12 -D 

or

  1. npm install webpack@3.3.12 -D 

创建入口文件

1.创建项目主目录

  1. mkdir src 

2.创建入口文件

  1. touch main.js 

3.编辑入口文件

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

  1. console.log('maomin1'); 

创建编辑webpack 配置文件

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

  1. touch webpack.config.js 

并编辑。

  1. const path = require('path'); 
  2.  
  3. module.exports = { 
  4.     mode:'development'
  5.     entry:'./src/main.js'
  6.     output:{ 
  7.         path:path.resolve(__dirname,'dist'), 
  8.         filename:'bundle.min.js' 
  9.     } 

运行测试打包

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

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

  1. /* 
  2.  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). 
  3.  * This devtool is neither made for production nor for readable output files. 
  4.  * It uses "eval()" calls to create a separate source file in the browser devtools. 
  5.  * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) 
  6.  * or disable the default devtool with "devtool: false"
  7.  * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). 
  8.  */ 
  9. /******/ (() => { // webpackBootstrap 
  10. /******/  var __webpack_modules__ = ({ 
  11.  
  12. /***/ "./src/main.js"
  13. /*!*********************!*\ 
  14.   !*** ./src/main.js ***! 
  15.   \*********************/ 
  16. /***/ (() => { 
  17.  
  18. eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?"); 
  19.  
  20. /***/ }) 
  21.  
  22. /******/  }); 
  23. /************************************************************************/ 
  24. /******/   
  25. /******/  // startup 
  26. /******/  // Load entry module and return exports 
  27. /******/  // This entry module can't be inlined because the eval devtool is used. 
  28. /******/  var __webpack_exports__ = {}; 
  29. /******/  __webpack_modules__["./src/main.js"](); 
  30. /******/   
  31. /******/ })() 

我们将注释删掉后,会精简不少!

  1. (() => { 
  2.  var __webpack_modules__ = ({ 
  3.         "./src/main.js"
  4.         (() => {eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");}) 
  5.  }); 
  6.  
  7.  var __webpack_exports__ = {}; 
  8.  __webpack_modules__["./src/main.js"](); 
  9. })(); 

准备实战

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

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

  1. mkdir maominpack 

2.然后,在maominpack文件夹下创建一个bin文件夹

  1. mkdir bin 

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

编辑如下:

  1. #!/usr/bin/env node 
  2. const fs = require('fs'); 
  3. const ejs = require('ejs'); 
  4. const config = require('../../webpack.config.js'); 
  5.  
  6. const entry = config.entry; 
  7. const output = `${config.output.path}\/${config.output.filename}`; 
  8. const content = fs.readFileSync(entry,'utf8'); 
  9.  
  10. let template = ` 
  11. (() => {  
  12.     var __webpack_modules__ = ({ 
  13.      
  14.     "<%-entry%>"
  15.     (() => { 
  16.      
  17.     eval("<%-content%>"); 
  18.      
  19.     }) 
  20.      
  21.          }); 
  22.          var __webpack_exports__ = {}; 
  23.          __webpack_modules__["<%-entry%>"](); 
  24.           
  25.      })() 
  26.     ; 
  27.  
  28. let package = ejs.render(template,{ 
  29.     entry, 
  30.     content 
  31. }); 
  32.  
  33. fs.writeFileSync(output,package); 

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

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

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

4.在package.json文件下编辑如下:

  1.   "name""maominpack"
  2.   "version""1.0.0"
  3.   "bin":{ 
  4.     "maominpack":"bin/maominpack.js" 
  5.   }, 
  6.   "main""index.js"
  7.   "license""MIT" 

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

  1. npm link  

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

  1. npm config ls 

7.验证打包

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

  1. console.log('maomin2'); 

然后,键入命令:

  1. maominpack 

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

  1. (() => {  
  2.     var __webpack_modules__ = ({ 
  3.      
  4.     "./src/main.js"
  5.     (() => { 
  6.      
  7.     eval("console.log('maomin2');"); 
  8.      
  9.     }) 
  10.      
  11.          }); 
  12.          var __webpack_exports__ = {}; 
  13.          __webpack_modules__["./src/main.js"](); 
  14.           
  15.      })() 
  16.     ; 

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

 

责任编辑:姜华 来源: 前端历劫之路
相关推荐

2018-10-08 15:00:47

Python区块链编程语言

2022-08-29 07:48:27

文件数据参数类型

2023-12-18 08:00:42

JavaScrip框架Lit

2021-12-02 06:58:01

中间页中间层编程

2021-06-18 06:11:26

工具WebpackSnowpack

2016-11-03 08:57:02

javascriptjquerynode.js

2010-04-13 00:02:22

Visual StudIDE

2017-12-28 14:44:42

Python人工智能神经网络

2015-01-12 09:33:27

WAN

2021-06-22 10:43:03

Webpack loader plugin

2024-02-21 08:19:54

2018-10-11 21:00:18

2018-11-19 11:28:23

数据公有云IT部门

2017-04-26 14:48:01

Chrome程序扩展

2020-12-21 06:09:39

线程Java对象

2020-10-30 15:04:16

开发技能代码

2016-11-14 14:52:47

vue.jses6javascript

2022-10-08 08:15:55

GScriptGo 语言

2020-10-28 11:40:08

MySQL索引数据库

2014-11-19 13:06:59

点赞
收藏

51CTO技术栈公众号