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把我们的文件分成了不同的模块函数，初始加载入口模块函数，然后将加载后的模块函数进行缓存，每个模块函数加载后的返回值就是我们模块对外暴露的对象，这样就可以被其它模块进行使用，至此，这就是最简单的同步加载使用场景