webpack 最简打包结果分析
本站寻求有缘人接手，详细了解请联系站长QQ1493399855
原文链接：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, // thismodule, // 模块对象本身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 valueif (mode & 4 && typeof value === 'object' && value && value.__esModule)return valuevar 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// 加载入口模块并返回 exportreturn __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。
整理一下整个流程：
- 定义
__webpack_require__及其辅助函数 - 使用
__webpack_require__引入入口模块 -
__webpack_require__函数载入模块，将模块放到模块缓存 -
调用模块
- 同样使用
__webpack_require__读取依赖（回到第 3 步） - 运行模块内部功能
- 使用
__webpack_exports__['default']直接赋值和__webpack_require__.d输出
- 同样使用
- 运行结束