詳解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__ 讀取依賴(回到第 3 步)
- 運(yùn)行模塊內(nèi)部功能
- 使用 __webpack_exports__['default'] 直接賦值和 __webpack_require__.d 輸出
- 運(yùn)行結(jié)束
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開(kāi)發(fā)的時(shí)候,很多人多多少少都會(huì)被this的指向問(wèn)題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
JavaScript 十六進(jìn)制RGB色碼轉(zhuǎn)換器
JavaScript 十六進(jìn)制RGB色碼轉(zhuǎn)換器,大家可以學(xué)習(xí)下思路。2009-08-08
Javascript實(shí)現(xiàn)簡(jiǎn)單二級(jí)下拉菜單實(shí)例
這篇文章主要介紹Javascript實(shí)現(xiàn)二級(jí)下拉菜單的具體過(guò)程,需要的朋友可以參考下2014-06-06
javascript axios 實(shí)現(xiàn)進(jìn)度監(jiān)控的示例代碼
在使用axios發(fā)送HTTP請(qǐng)求時(shí),可以通過(guò)onUploadProgress和onDownloadProgress來(lái)監(jiān)控上傳和下載的進(jìn)度,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
javascript強(qiáng)制彈出新窗口實(shí)現(xiàn)代碼
javascript強(qiáng)制彈出新窗口,主要是利用的動(dòng)態(tài)創(chuàng)建鏈接。2009-12-12
深入理解JavaScript字節(jié)二進(jìn)制知識(shí)以及相關(guān)API
當(dāng)前,前端對(duì)二進(jìn)制數(shù)據(jù)有許多的API可以使用,這豐富了前端對(duì)文件數(shù)據(jù)的處理能力,有了這些能力,就能夠?qū)D片等文件的數(shù)據(jù)進(jìn)行各種處理。本文將著重介紹一些前端二進(jìn)制數(shù)據(jù)處理相關(guān)的API知識(shí),希望對(duì)大家有所幫助2023-02-02
uni-app h5端在jenkins構(gòu)建報(bào)錯(cuò)解決
這篇文章主要為大家介紹了uni-app h5端在jenkins構(gòu)建報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Javascript計(jì)算兩個(gè)marker之間的距離(Google Map V3)
做地圖開(kāi)發(fā),最常用到的就是marker一些操作和交互。簡(jiǎn)單介紹一下,兩個(gè)marker之間的距離計(jì)算,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04

