原文链接：https://ssshooter.com/2019-02…

如今的 webpack 不再是入门恶梦,过去 webpack 最使民气塞的莫过于设置文件，而 webpack4 降生随之而来的是无设置 webpack。

运用 webpack4，最少只须要装置 webpack 和 webpack cli。所以人人完全可以自身打一个最简朴的包，还能修正插件对照前后的区分。

npm i webpack webpack-cli -D 装置后，由于 webpack4 会默许 src 为进口目次，所以先新建 src/index.js。

// src/index.js
import { sth } from './shouldImport'
import other from './shouldImport'

let test = 'this is a variable'

export default {
  a: test + ',' + sth,
  other,
}

为了更相识 webpack  导入机制所以再新建 src/shouldImport.js。

// src/shouldImport.js
export let sth = 'something you need'

export default {
  others: '',
}

然后运转 node_modules/.bin/webpack --mode development 即可在 dist/main.js 看到打包后的文件。

然则默许设置中模块文件会被 eval 包裹致使不方便检察，所以须要再在设置做一点修正，把 devtool 属性改成 'source-map'：

// 在根目次新建 webpack.config.js 文件
module.exports = mode => {
  if (mode === 'production') {
    return {}
  }

  return {
    devtool: 'source-map',
  }
}

然后再打包应当就可以看到相似一下的文件构造，开辟环境下打包获得的文件自带解释，明白起来不难：

;(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
    // 实行模块函数（有点不懂为何 this 要传入 module.exports）
    modules[moduleId].call(
      module.exports, // this
      module, // 模块对象自身
      module.exports, // 模块对象的 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

  // Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property)
  }

  // define getter function for harmony exports
  // 为 ES6 export 定义 getter 函数
  __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
  // 于 export 定义 __esModule
  __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
  // value 是模块 id，必要
  // mode & 2: merge all properties of value into the ns
  // 兼并 value 一切属性到 ns
  // mode & 4: return value when already ns object
  // ns 已经是对象时返回 value
  // mode & 8|1: behave like require
  // 表现如 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
  // 用于兼容非 ES6 模块的 getDefaultExport 函数
  __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
  }

  // __webpack_public_path__
  __webpack_require__.p = ''

  // Load entry module and return exports
  // 加载进口模块并返回 export
  return __webpack_require__((__webpack_require__.s = './src/index.js'))
})({
  './src/index.js':
    /*! exports provided: default */
    function(module, __webpack_exports__, __webpack_require__) {
      'use strict'
      __webpack_require__.r(__webpack_exports__) // 于 export 定义 __esModule
      /* harmony import */
      var _shouldImport__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
        './src/shouldImport.js'
      )

      let test = 'this is a variable'

      /* harmony default export */

      __webpack_exports__['default'] = {
        a: test + ',' + _shouldImport__WEBPACK_IMPORTED_MODULE_0__['sth'],
        other: _shouldImport__WEBPACK_IMPORTED_MODULE_0__['default'],
      }
    },

  './src/shouldImport.js':
    /*! exports provided: sth, default */
    function(module, __webpack_exports__, __webpack_require__) {
      'use strict'
      __webpack_require__.r(__webpack_exports__)
      /* harmony export (binding) */

      __webpack_require__.d(__webpack_exports__, 'sth', function() {
        return sth
      })
      let sth = 'something you need'

      __webpack_exports__['default'] = {
        others: '',
      }
    },
})

源文件中的一切 import 和 export 都邑转换为对应的辅佐函数。

• import 对应 __webpack_require__
• export 对应 __webpack_exports__['default'] 直接赋值和 __webpack_require__.d。

整顿一下全部流程：

1. 定义 __webpack_require__ 及其辅佐函数
2. 运用 __webpack_require__ 引入进口模块
3. __webpack_require__ 函数载入模块，将模块放到模块缓存

4. 挪用模块

   1. 一样运用 __webpack_require__ 读取依靠（回到第 3 步）
   2. 运转模块内部功用
   3. 运用 __webpack_exports__['default'] 直接赋值和 __webpack_require__.d 输出
5. 运转完毕