webpack 原理解析
2019-07-13 本文已影响0人
没有颜色的菜
前言
算是一个h5开发了，虽然没写过什么完整的前端页面，但接触前端也有段时间了，对于一个合格的前端开发者而言，搞懂 webpack 打包原理还是比较重要的。
hello world
使用 commonjs 规范，lib.js 只导出一个方法
// lib.js
module.exports = function () {
return "hello webpack!"
}
index.js 使用 require 引入，代码很简单，输入方法返回值
// index.js
const func = require("./lib")
const result = func()
// print hello
console.log(result)
目录结构
.
├── dist
│ └── main.js
├── package-lock.json
├── package.json
├── node_modules
├── src
│ ├── index.js
│ └── lib.js
└── webpack.config.js
webpack.config.js
为了方便看生成的源码，我们将 mode 设置为 development，
var path = require('path');
module.exports = {
context: path.resolve(__dirname, './'),
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
};
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.35.2",
"webpack-cli": "^3.3.5"
},
"dependencies": {}
}
编译运行
npm run build
node dist/main.js
输出
$ node dist/main.js
hello webpack!
起源
浏览器，node 并不支持模块化，我们在项目中使用的 require、export 将会经过 webpack 后，这些 js 就会被打包整合成一个 js 文件，只需要运行 js 文件，整个模块将会运行起来了。
main.js 解析
整个文件只有 111 行，这是未经过压缩的版本，生产环境下的输出文件比这还要精简，只需要在 webpack.config.js 中将 mode 值等于 production 即可改变打包环境
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ 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) {
/******/ 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":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("// index.js\nconst func = __webpack_require__(/*! ./lib */ \"./src/lib.js\")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ }),
/***/ "./src/lib.js":
/*!********************!*\
!*** ./src/lib.js ***!
\********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("module.exports = function () {\n return \"hello webpack!\"\n}\n\n//# sourceURL=webpack:///./src/lib.js?");
/***/ })
/******/ });
我们先将此文件的主要部分拿出来看
/******/
(function (modules) {
var installedModules = {}
function __webpack_require__ (moduleId) {
if (installedModules[moduleId]) {
return installedModules[moduleId].exports
}
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
}
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
module.l = true
return module.exports
}
return __webpack_require__(__webpack_require__.s = './src/index.js')
})
({
'./src/index.js':
(function (module, exports, __webpack_require__) {
eval(
'// index.js\nconst func = __webpack_require__(/*! ./lib */ "./src/lib.js")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?')
}),
'./src/lib.js':
(function (module, exports) {
eval(
'module.exports = function () {\n return "hello webpack!"\n}\n\n//# sourceURL=webpack:///./src/lib.js?')
})
})
这是一个立即执行函数，首先申明了 installedModules 对象，这是已安装的模块集合，之后定义了一个函数 webpack_require ，此函数用来获取模块的引用，最后 return 了此函数，参数为入口，moduleId = './src/index.js'
modules 即为
{
'./src/index.js':
(function (module, exports, __webpack_require__) {
eval(
'// index.js\nconst func = __webpack_require__(/*! ./lib */ "./src/lib.js")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?')
}),
'./src/lib.js':
(function (module, exports) {
eval(
'module.exports = function () {\n return "hello webpack!"\n}\n\n//# sourceURL=webpack:///./src/lib.js?')
})
}
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
module 即模块，modules[moduleId] 即为
(function (module, exports, __webpack_require__) {
eval(
'// index.js\nconst func = __webpack_require__(/*! ./lib */ "./src/lib.js")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?')
})
module.exports 为 this 上下文环境，该函数执行中，第一行即调用
const func = __webpack_require__("./src/lib.js")
webpack_require("./src/lib.js") 即调用了此函数
(function (module, exports) {
eval(
'module.exports = function () {\n return "hello webpack!"\n}\n\n//# sourceURL=webpack:///./src/lib.js?')
})
最后返回 module.exports 即 lib 里面的导出函数。再往后执行便是
const result = func()
// print hello
console.log(result)
此刻基本已经将关系理顺了，此后如果在调用模块，则世界从 installedModules 中直接返回。
总结
此文只是分析了简单的模块引用，需要仔细分析才能融会贯通。
