一起探索最真实的世界
webpack是啥
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack
最简单的🌰
const path = require('path');
module.exports = {
// JS 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
}
};
以上是webpack.config.js的配置,非常简单，只配置了entry（入口）和ouput（输出）
我们的目录如下
|-- index.html
|-- main.js
|-- show.js
|-- webpack.config.js
index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 webpack 输出的 JS 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
main.js
// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');
show.js
// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
运行下
webpack
webpack打包后，根目录下dist目录下
|-- dist/
|---- bundle.s
bundel.js
(function (modules) {
// webpack启动函数，modules就是webpack根据入口文件进行依赖解析后的模块数组，每个模块都是一个函数
// 模块缓存数组，记录已经加载的模块
var installedModules = {};
// 加载函数
function __webpack_require__(moduleId) {
// 检测是否已经加载
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 根据模块id创建一个模块module，并且存入模块缓存数组
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// 执行传入的模块数组中modules[moduleId]
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 模块加载状态置为true
module.l = true;
// 返回module的exports，这边就是各个模块定义的返回内容
return module.exports;
}
// 加载入口模块，返回入口模块的module.exports
return __webpack_require__(__webpack_require__.s = 0);
})
([
/* 0 */
(function (module, exports, __webpack_require__) {
// 通过 CommonJS 规范导入 show 函数
const show = __webpack_require__(1);
// 执行 show 函数
show('Webpack');
}),
/* 1 */
(function (module, exports) {
// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
})
]);
从上面打包之后的代码可以看出,webpack把我们的文件分成了不同的模块函数，初始加载入口模块函数，然后将加载后的模块函数进行缓存，每个模块函数加载后的返回值就是我们模块对外暴露的对象，这样就可以被其它模块进行使用，至此，这就是最简单的同步加载使用场景
