简单看一下webpack的生成文件

只是想看一下webpack最后生成的文件

// main.js
const show = require('./show.js');
show('webpack');

// show.js
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

module.exports = show;

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap 启动函数


/******/    var __webpack_modules__ = ({
/***/ "./main.js":
/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {

  eval(`
  const show = __webpack_require__("./show.js");
  show('webpack')
  //# sourceURL=webpack://webpack/./main.js?`);

  /***/ }),
  
  /***/ "./show.js":
  /***/ ((module) => {
  
  eval(`function show(content) {  
    window.document.getElementById('app').innerText = 'Hello,' + content;
  }
  module.exports = show;
  //# sourceURL=webpack://webpack/./show.js?`);
  
  /***/ })
  
  /******/  });


  /************************************************************************/
  /******/  // The module cache
  /******/  var __webpack_module_cache__ = {};
  /******/  
  /******/  // The require function
  /******/  function __webpack_require__(moduleId) {
  /******/      // Check if module is in cache
  /******/      if(__webpack_module_cache__[moduleId]) {
  /******/          return __webpack_module_cache__[moduleId].exports;
  /******/      }
  /******/      // Create a new module (and put it into the cache)
  /******/      var module = __webpack_module_cache__[moduleId] = {
  /******/          // no module.id needed
  /******/          // no module.loaded needed
  /******/          exports: {}
  /******/      };
  /******/  
  /******/      // Execute the module function
  /******/      __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  /******/  
  /******/      // Return the exports of the module
  /******/      return module.exports;
  /******/  }
  /******/  
  /************************************************************************/
  /******/  
  /******/  // startup
  /******/  // Load entry module and return exports
  /******/  // This entry module can't be inlined because the eval devtool is used.
  /******/  var __webpack_exports__ = __webpack_require__("./main.js");
  /******/  
  /******/ })()
  ;

首先先执行的

var __webpack_exports__ = __webpack_require__("./main.js");

这是我们的入口文件
接下来看一下__webpack_require__做了什么

function __webpack_require__(moduleId) {
  if(__webpack_module_cache__[moduleId]) {
    return __webpack_module_cache__[moduleId].exports;
  }

  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  return module.exports;
}

先看看webpack_module_cache有没有缓存，如果有直接返回。如果没有
module.exports = {}，同时__webpack_module_cache__[moduleId].exports = {}
接下来就是去webpack_modules里面找到'./main.js'为key的方法，然后执行。

  const show = __webpack_require__("./show.js");
  show('webpack')

接着看__webpack_require__("./show.js")，webpack_module_cache里没有__webpack_module_cache__['./show.js']，那么module.exports = {}
接着在__webpack_modules__里找到__webpack_modules__['./show.js']，把这里的module作为参数传入

function show(content) {  
   window.document.getElementById('app').innerText = 'Hello,' + content;
 }
 module.exports = show;

得到这里的module.exports的值是show。那么__webpack_require__ ['./show.js']返回了show这个函数，那么接着执行

const show = __webpack_require__("./show.js");
  show('webpack')

也就是说所有的依赖都是__webpack_require__返回代码并且执行，所有的模块都是在__webpack_modules__中以键值对的形式存在，键就是文件路径，值就是使用eval来执行的代码
可以看一下我的简易实现的webpack
https://github.com/TingYinHelen/toy-webpack