国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解webpack 最簡打包結果分析

2019-11-19 12:06:24
字體:
來源:轉載
供稿:網友

現在的 webpack 不再是入門噩夢,過去 webpack 最讓人心塞的莫過于配置文件,而 webpack4 誕生隨之而來的是無配置 webpack。

使用 webpack4,至少只需要安裝 webpack 和 webpack cli。所以大家完全可以自己打一個最簡單的包,還能修改插件對比前后的區別。

npm i webpack webpack-cli -D 安裝后,因為 webpack4 會默認 src 為入口目錄,所以先新建 src/index.js

// src/index.jsimport { 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.jsexport 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. 運行結束

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 孙吴县| 大荔县| 东城区| 莱西市| 柘荣县| 普兰县| 金华市| 湖北省| 红桥区| 余姚市| 横峰县| 康马县| 大厂| 额敏县| 海晏县| 府谷县| 宁安市| 沧源| 屏山县| 五大连池市| 岗巴县| 景东| 额济纳旗| 子长县| 西峡县| 高州市| 邻水| 县级市| 阿拉善盟| 若羌县| 边坝县| 延川县| 乐清市| 鲁甸县| 广丰县| 威远县| 安泽县| 资溪县| 江源县| 河南省| 石城县|