Webpack 基础配置,及打包文件源码分析

发布 : 2019-02-16 分类 : Webpack 浏览 :

分析 Webpack build 出的源码,有易于我们理解,js 模块加载机制,接下来我会以最基础的配置为例,分析 mode development 模式下的源码

源码地址:https://github.com/JuZiSang/coding-test/tree/master/tools/webpack/demo01

基础打包 JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
// 模式,默认两种, production development
// production 生产环境,打包出来的 js 会进行,压缩混淆,优化
// development 开发环境 不会压缩代码
mode: "development",
// 入口
entry: "./src/main.js",
// 出口
output: {
// 打包后的文件名,hash:8 名字中带 8位 hash
filename: "bundle.[hash:8].js",
// 打包路径,必须是绝对路径
path: path.resolve("dist")
}
};

webpack 打包文件分析

可以看到,模块只会安装一次,后续的引入只会返回第一次的结果的引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// 立即执行函数,modules 就是我们引入的模块
(function(modules) {
// webpackBootstrap
// The module cache
// 缓存,已经安装的模块缓存
var installedModules = {};

// The require function
// 定义了一个 require 函数
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/main.js"));
})({
// 引入的 a 模块
/*! no static exports found */
"./src/a.js": function(module, exports) {
eval('module.exports = "str";\n\n\n//# sourceURL=webpack:///./src/a.js?');
},
// 我们的入口
"./src/main.js":
/*! no static exports found */
function(module, exports, __webpack_require__) {
eval('const str = __webpack_require__(/*! ./a */ "./src/a.js");\n\nconsole.log(str);\n\n\n//# sourceURL=webpack:///./src/main.js?');
}
});
本文作者 : Juzisang
原文链接 : https://www.juzisang.com/passages/Webpack 基础配置,及打包文件源码分析/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
留下足迹