webpack4.0原始碼解析之CommonJS規範打包後js檔案分析
阿新 • • 發佈:2021-02-17
首先,init之後建立一個簡單的webpack基本的配置,在src目錄下建立兩個js檔案(一個主入口檔案和一個非主入口檔案)和一個html檔案,package.json,webpack.config.js程式碼如下:
var name=require('./index1.js') console.log('我是入口js檔案') console.log(name)
module.exports="我不是入口檔案"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
{ "name": "mywebpack", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "html-webpack-plugin": "4.5.0", "webpack": "4.44.2", "webpack-cli": "3.3.12" } }
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { devtool: 'none', mode: 'development', entry: './src/index.js', output: { filename: 'built.js', path: path.resolve('dist') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }
執行yarn webpack打包之後生成的built.js檔案
1 打包之後的js檔案是一個匿名函式自呼叫和一個當前函式呼叫時傳入的一個物件
2 這個物件暫且稱之為模組定義,它是一個鍵值對
3 這個物件的鍵名是當前載入模組的檔名和某個目錄的拼接
4 這個鍵的值就是一個函式,和node.js模組載入有一些類似,會將被載入模組中的內容包裹在一個函式中
5 這個函式在將來某個時間點上會被呼叫,同時接收到一定的引數,利用這些引數可以實現模組的載入操作
(function(modules) { // webpackBootstrap // 此變數為快取區,如果有快取,從快取中取,沒快取新增 var installedModules = {}; //Webpack自定義的一個載入方法,核心功能就是返回被載入模組中匯出的內容(具體後續分析) function __webpack_require__(moduleId) { //判斷快取中是否有對應的輸出 if(installedModules[moduleId]) { return installedModules[moduleId].exports; } //如果沒有快取建立一個新的module,針對兩次require的方法呼叫是不一樣的 //因為作用域不同 var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; //改變this指向,呼叫函式 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); //表示已存在快取中 module.l = true; //返回輸出 return module.exports; } // 將模組定義儲存一份,通過m屬性掛載到自定義方法 __webpack_require__.m = modules; // 保留快取 __webpack_require__.c = installedModules; // define getter function for harmony exports __webpack_require__.d = function(exports, name, getter) { //如果當前exports身上不具備name屬性 則條件成立 if(!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { enumerable: true, get: getter }); } }; // define __esModule on exports __webpack_require__.r = function(exports) { //下面的條件如果成立就說明是一個 esmodule規範 if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); } //如果條件不成立,我們也直接在exports物件愛那個身上新增__esModule,它的值是true Object.defineProperty(exports, '__esModule', { value: true }); }; // create a fake namespace object // mode & 1: value is a module id, require it // mode & 2: merge all properties of value into the ns // mode & 4: return value when already ns object // mode & 8|1: behave like require __webpack_require__.t = function(value, mode) { // 1 呼叫 t 方法之後,我們會拿到被載入模組中的內容 value // 2 對於 value 來說我們可能會直接返回,也可能會處理之後再返回 if(mode & 1) value = __webpack_require__(value); if(mode & 8) return value; if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; var ns = Object.create(null); __webpack_require__.r(ns); Object.defineProperty(ns, 'default', { enumerable: true, value: value }); if(mode & 2 && typeof value != 'string')
for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); return ns; }; // getDefaultExport function for compatibility with non-harmony modules __webpack_require__.n = function(module) { var getter = module && module.__esModule ? function getDefault() { return module['default']; } : function getModuleExports() { return module; }; __webpack_require__.d(getter, 'a', getter); return getter; }; // Object.prototype.hasOwnProperty.call __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // __webpack_public_path__ __webpack_require__.p = ""; // Load entry module and return exports return __webpack_require__(__webpack_require__.s = "./src/index.js"); }) /************************************************************************/ ({ "./src/index.js": //這塊載入的時候傳入了__webpack_require__方法,而下面index1.js未傳入__webpack_require__方法 //原因在於index1不需要再require其它模組了 (function(module, exports, __webpack_require__) { var name=__webpack_require__(/*! ./index1.js */ "./src/index1.js") console.log('我是入口js檔案') console.log(name) }), "./src/index1.js": (function(module, exports) { module.exports="我不是入口檔案" }) });
針對於上述的程式碼就相當於是將 {}(模組定義) 傳遞給了 modules,之後進行了程式碼執行,分模組匯入匯出,打包之後的檔案__webpack_require__裡面的方法,下節分場景具體分析。
/**********************************************************************************************************************************************************************************************************************************************************/
沒人會把我們變得越來越好,時間也只是陪襯。支撐我們變的越來越好的是我們自己不斷進階的才華,修養,品行以及不斷的反思和修