现在的 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。
整理一下整个流程:
- 定义 __webpack_require__ 及其辅助函数
- 使用 __webpack_require__ 引入入口模块
- __webpack_require__ 函数载入模块,将模块放到模块缓存
- 调用模块
- 同样使用 __webpack_require__ 读取依赖(回到第 3 步)
- 运行模块内部功能
- 使用 __webpack_exports__['default'] 直接赋值和 __webpack_require__.d 输出
- 运行结束
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 林姗.2024-寄天的记忆【豪记】【FLAC分轨】
- 陈洁丽-《可改变HQ2》2024[WAV+CUE]
- 福田进一2024《魔鬼随想曲》WAV
- 群星《新歌龙卷风》2CD/DTS-ES[WAV]
- 群星《湮灭之潮 《明日之后》蓝潮资料片游戏原声带》[320K/MP3][50.49MB]
- 群星《湮灭之潮 《明日之后》蓝潮资料片游戏原声带》[FLAC/分轨][232.82MB]
- 威神V(WayV)《The Highest》[320K/MP3][45MB]
- lol全球总决赛lck二号种子是谁 S14全球总决赛lck二号种子队伍介绍
- 魔兽世界万圣节糖果任务怎么做 耶斯帕尔的万圣节糖果任务攻略
- s14全球总决赛晋级图在哪看 2024s14全球总决赛晋级图一览
- 国行30周年限定版PS5开箱!配件超多 致敬经典
- 《怪物猎人:荒野》弓箭引导箭功能展示:我去!有外挂!
- 游戏大年背后的风雨摇摆 盘点2024年遭遇裁员的游戏厂商
- 徐小凤.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 余天.2004-二十年来最畅销国语金曲系列2CD【丽歌】【WAV+CUE】