前言

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

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

戰前準備

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

1.初始化

創建項目目錄

mkdir webpackmini 

2.安裝webpack依賴

yarn add webpack -D 

or

npm install webpack -D 

3.安裝webpack-cli依賴 這裡，稍微注意一下，我們可以下載這個版本的，最新版的安裝之後好像不可用。

yarn add webpack-cli@3.3.12 -D 

or

npm install webpack@3.3.12 -D 

創建入口文件

1.創建項目主目錄

mkdir src 

2.創建入口文件

touch main.js 

3.編輯入口文件

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

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');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"]();
  /******/
  /******/ 
})() ; 

我們將注釋刪掉後，會精簡不少!

(() => {
  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.首先我們在項目根目錄下創建一個文件夾。

mkdir maominpack 

2.然後，在maominpack文件夾下創建一個bin文件夾

mkdir bin 

3.最後在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()，第一個參數是需要處理的字符串，第二個參數使我們需要修改的值，是一個對象。

4.在package.json文件下編輯如下：

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

5.為其命令創建快捷方式

npm link  

6.為其配置在其他目錄也可使用此命令

npm config ls 

7.驗證打包

我們將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還有很多值得玩的特性。