詳解webpack 最簡(jiǎn)打包結(jié)果分析
現(xiàn)在的 webpack 不再是入門(mén)噩夢(mèng),過(guò)去 webpack 最讓人心塞的莫過(guò)于配置文件,而 webpack4 誕生隨之而來(lái)的是無(wú)配置 webpack。
使用 webpack4,至少只需要安裝 webpack 和 webpack cli。所以大家完全可以自己打一個(gè)最簡(jiǎn)單的包,還能修改插件對(duì)比前后的區(qū)別。
npm i webpack webpack-cli -D
安裝后,因?yàn)?webpack4 會(huì)默認(rèn) 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 導(dǎo)入機(jī)制所以再新建 src/shouldImport.js。
// src/shouldImport.js export let sth = 'something you need' export default { others: '', }
然后運(yùn)行 node_modules/.bin/webpack --mode development
即可在 dist/main.js 看到打包后的文件。
但是默認(rèn)設(shè)置中模塊文件會(huì)被 eval 包裹導(dǎo)致不便查看,所以需要再在設(shè)置做一點(diǎn)修改,把 devtool 屬性改為 'source-map'
:
// 在根目錄新建 webpack.config.js 文件 module.exports = mode => { if (mode === 'production') { return {} } return { devtool: 'source-map', } }
然后再打包應(yīng)該就能看到類(lèi)似一下的文件結(jié)構(gòu),開(kāi)發(fā)環(huán)境下打包得到的文件自帶注釋?zhuān)斫馄饋?lái)不難:
;(function(modules) { // webpackBootstrap // The module cache 模塊緩存 var installedModules = {} // The require function 請(qǐng)求函數(shù) 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) // 創(chuàng)建新模塊并放進(jìn)緩存 var module = (installedModules[moduleId] = { i: moduleId, l: false, exports: {}, }) // Execute the module function // 執(zhí)行模塊函數(shù)(有點(diǎn)不懂為什么 this 要傳入 module.exports) modules[moduleId].call( module.exports, // this module, // 模塊對(duì)象本身 module.exports, // 模塊對(duì)象的 exports 屬性 __webpack_require__ // 請(qǐng)求函數(shù)最終返回模塊輸出,傳入用于請(qǐng)求其他模塊 ) // Flag the module as loaded // 加載完成標(biāo)志 module.l = true // Return the exports of the module // 返回模塊的輸出 return module.exports } // expose the modules object (__webpack_modules__) // 暴露所有模塊對(duì)象 __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 函數(shù) __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 // 創(chuàng)建代用命名空間對(duì)象 // 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 已經(jīng)是對(duì)象時(shí)返回 value // mode & 8|1: behave like require // 表現(xiàn)如 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 函數(shù) __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
都會(huì)轉(zhuǎn)換為對(duì)應(yīng)的輔助函數(shù)。
- import 對(duì)應(yīng) __webpack_require__
- export 對(duì)應(yīng) __webpack_exports__['default'] 直接賦值和 __webpack_require__.d。
整理一下整個(gè)流程:
- 定義 __webpack_require__ 及其輔助函數(shù)
- 使用 __webpack_require__ 引入入口模塊
- __webpack_require__ 函數(shù)載入模塊,將模塊放到模塊緩存
- 調(diào)用模塊
- 同樣使用 __webpack_require__ 讀取依賴(lài)(回到第 3 步)
- 運(yùn)行模塊內(nèi)部功能
- 使用 __webpack_exports__['default'] 直接賦值和 __webpack_require__.d 輸出
- 運(yùn)行結(jié)束
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript中toFixed()四舍五入使用方法詳解
最近做的項(xiàng)目涉及到金額的計(jì)算,有一種方式就是進(jìn)行四舍五入的規(guī)則進(jìn)行小數(shù)點(diǎn)后面的尾數(shù)處理,以前一直以為toFixed方法就是四舍五入的,這里為大家分享一下2018-09-09JavaScript 語(yǔ)言精粹學(xué)習(xí)筆記
JavaScript建立在一些非常好的想法和少數(shù)非常壞的想法之上。2009-08-08JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法
這篇文章主要介紹了JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法,涉及javascript中Math.Min方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04基于Web標(biāo)準(zhǔn)的UI組件 — 樹(shù)狀菜單(2)
基于Web標(biāo)準(zhǔn)的UI組件 — 樹(shù)狀菜單(2)...2006-09-09JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法完整示例
這篇文章主要介紹了JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2020-01-01JS 循環(huán)li添加點(diǎn)擊事件 (閉包的應(yīng)用)
這篇文章主要介紹了js循環(huán)li添加點(diǎn)擊事件 (閉包的應(yīng)用)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12使用BootStrapValidator完成前端輸入驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了使用BootStrapValidator來(lái)完成前端輸入驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁(yè)
本篇文章通過(guò)實(shí)例給大家分享了layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁(yè)的詳細(xì)方法,以及效果展示,有需要的朋友可以跟著參考學(xué)習(xí)下。2018-04-04