偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

今天,我們來實現(xiàn)一個基礎(chǔ)版的Webpack

開發(fā) 前端
webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。提到模塊,模塊顧名思義是獨立的JS文件。與之相近的詞模塊化,通俗的講就是我們平時組織和管理代碼方法的一種實現(xiàn)。

[[412320]]

前言

本質(zhì)上,webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當 webpack 處理應(yīng)用程序時,它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。

這是官網(wǎng)對webpack的解釋。提到模塊,模塊顧名思義是獨立的JS文件。與之相近的詞模塊化,通俗的講就是我們平時組織和管理代碼方法的一種實現(xiàn)。

戰(zhàn)前準備

我們先來測試一下webpack的打包。

1.初始化

創(chuàng)建項目目錄

  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 

創(chuàng)建入口文件

1.創(chuàng)建項目主目錄

  1. mkdir src 

2.創(chuàng)建入口文件

  1. touch main.js 

3.編輯入口文件

我們這里使用最簡單的一行代碼。

  1. console.log('maomin1'); 

創(chuàng)建編輯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. })(); 

準備實戰(zhàn)

開始實戰(zhàn)實現(xiàn)一個基礎(chǔ)版的webpack。

1.首先我們在項目根目錄下創(chuàng)建一個文件夾。

  1. mkdir maominpack 

2.然后,在maominpack文件夾下創(chuàng)建一個bin文件夾

  1. mkdir bin 

3.最后在bin文件夾下創(chuàng)建一個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); 

首先,我們在頭部指定環(huán)境為node環(huán)境,并且引入fs模塊。然后,我們引入了ejs依賴,如果不是很了解ejs的,可以去官網(wǎng)瀏覽下。這里就簡單的介紹一下。

  • “E” 代表什么?可以表示 “可嵌入(Embedded)”,也可以是“高效(Effective)”、“優(yōu)雅(Elegant)”或者是“簡單(Easy)”。EJS 是一套簡單的模板語言,幫你利用普通的 JavaScript 代碼生成 HTML 頁面。EJS 沒有如何組織內(nèi)容的教條;也沒有再造一套迭代和控制流語法;有的只是普通的 JavaScript 代碼而已。

我們看到在將帶有綁定值的字符串賦值給template變量,我們這里使用的ejs.render(),第一個參數(shù)是需要處理的字符串,第二個參數(shù)使我們需要修改的值,是一個對象。

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.為其命令創(chuàng)建快捷方式

  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.     ; 

 發(fā)現(xiàn),我們打包成功了。這里我們只是實現(xiàn)了最基礎(chǔ)的字符串替換打包功能,webpack還有很多值得玩的特性。

 

責任編輯:姜華 來源: 前端歷劫之路
相關(guān)推薦

2018-10-08 15:00:47

Python區(qū)塊鏈編程語言

2022-08-29 07:48:27

文件數(shù)據(jù)參數(shù)類型

2024-07-15 08:25:07

2023-12-18 08:00:42

JavaScrip框架Lit

2021-12-02 06:58:01

中間頁中間層編程

2021-06-18 06:11:26

工具WebpackSnowpack

2010-04-13 00:02:22

Visual StudIDE

2016-11-03 08:57:02

javascriptjquerynode.js

2015-01-12 09:33:27

WAN

2024-11-21 08:31:07

耗資源神秘進程

2017-12-28 14:44:42

Python人工智能神經(jīng)網(wǎng)絡(luò)

2024-08-29 09:18:55

2024-02-21 08:19:54

2021-06-22 10:43:03

Webpack loader plugin

2018-10-11 21:00:18

2018-11-19 11:28:23

數(shù)據(jù)公有云IT部門

2023-11-02 10:24:34

2015-12-09 14:53:58

開源手機系統(tǒng)

2025-02-27 09:35:22

2020-12-21 06:09:39

線程Java對象
點贊
收藏

51CTO技術(shù)棧公眾號