webpack中打包結果的示例分析

這篇文章給大家分享的是有關webpack中打包結果的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

現在的 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中打包結果的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！