偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Webpack 原理與實(shí)踐之如何使用 Webpack 實(shí)現(xiàn)模塊化打包？

作者： 一川
開發(fā) 前端
webpack還具備代碼拆分的能力，能夠?qū)?yīng)用中所有的模塊按需分塊打包，不用擔(dān)心全部代碼打包到一起，產(chǎn)生單個(gè)文件過大，導(dǎo)致加載慢的問題。這種模塊按需分塊打包非常適合大型web項(xiàng)目。

本文轉(zhuǎn)載自微信公眾號「前端萬有引力」，作者一川。轉(zhuǎn)載本文請聯(lián)系前端萬有引力公眾號。

寫在前面

我們知道當(dāng)前生產(chǎn)中主流的模塊化打包工具有Webpack、Parcel和Rollup。作為模塊化打包工具，它們基本的特點(diǎn)有：

  • 能夠?qū)⑸⒙涞哪K打包在一起
  • 能夠編譯轉(zhuǎn)換代碼中的新特性，使得可以兼容各種生產(chǎn)環(huán)境

對于主流的webpack而言，webpack作為一個(gè)模塊打包工具，自身就可以實(shí)現(xiàn)模塊化代碼打包的問題，通過webpack可以將零散的JS代碼打包到一個(gè)JS文件中。對于有環(huán)境兼容性問題的代碼，webpack可以在代碼打包過程中通過loader機(jī)制對其實(shí)現(xiàn)編譯轉(zhuǎn)換，然后再進(jìn)行打包。對于不同類型的前端模塊，webpack支持在js中以模塊化的方式載入任意類型的資源文件，例如：可以通過webpack實(shí)現(xiàn)在JS中加載CSS文件，被加載的CSS文件會以style標(biāo)簽的方式工具。

webpack還具備代碼拆分的能力，能夠?qū)?yīng)用中所有的模塊按需分塊打包，不用擔(dān)心全部代碼打包到一起，產(chǎn)生單個(gè)文件過大，導(dǎo)致加載慢的問題。這種模塊按需分塊打包非常適合大型web項(xiàng)目。

Webpack上路

Webpack作為主流的前端模塊打包器，提供了一整套前端項(xiàng)目模塊化方案，而不僅僅局限于JS的模塊化，可以實(shí)現(xiàn)對前端項(xiàng)目開發(fā)過程中涉及到的資源進(jìn)行模塊化。

我們知道ES Modules中制定的html中使用script導(dǎo)入js模塊，需要設(shè)定type="module"，用來區(qū)分加載的是普通JS腳本還是一個(gè)模塊。對于支持ES Modules的瀏覽器可以直接使用，但是對于不支持的瀏覽器就會報(bào)錯(cuò)，因此需要使用webpack模塊打包工具避免報(bào)錯(cuò)。

  1. <script src="./index.js" type="module"></script> 
  1. // heading.js 
  2. export default function(){ 
  3.   const element = document.createElement("div"); 
  4.   element.textContent = "hello yichuan"; 
  5.   element.addEventListener("click",()=>{ 
  6.     console.log("hello onechuan"); 
  7.     return element 
  8.   }) 
  9. } 
  10.  
  11. // index.js 
  12. import createHeader  from "./heading.js"; 
  13. document.body.append(createHeader()) 

對于，我們需要先安裝webpack的核心模塊和cli程序，用于在命令行中調(diào)用webpack。npx是npm5.2以后新增的一個(gè)命令，可以更方便地執(zhí)行遠(yuǎn)程模塊或者項(xiàng)目node_modules中的cli程序。

  1. $ npm init --yes 
  2. $ npm i webpack webpack-cli -D 
  3. $ npx webpack --version 
  4. $ npx webpack 

通過執(zhí)行npx webpack實(shí)現(xiàn)自動化打包，webpack會默認(rèn)從src/index.js文件開始打包，打包完畢后會在根目錄下生產(chǎn)dist目錄，所有打包文件會在dist目錄。

  1. |--dist 
  2.   |--main.js 
  1. (()=>{"use strict";document.body.append(function(){const e=document.createElement("div");e.textContent="hello yichuan",e.addEventListener("click",(()=>(console.log("hello onechuan"),e)))}())})(); 

webpack4.0以后的版本支持零配置的方式直接啟動打包，整個(gè)過程會按照約定將src/index.js文件作為打包入口，最終打包的結(jié)果會存放到dis/main.js中。但是，很多時(shí)候webpack的默認(rèn)規(guī)則并能滿足我們實(shí)際需求，對此我們需要對webpack進(jìn)行自定義配置。

webpack支持在項(xiàng)目中創(chuàng)建webpack.config.js文件進(jìn)行自定義打包配置，由于webpack是運(yùn)行在node.js環(huán)境，對應(yīng)應(yīng)該遵守CommonJS規(guī)則進(jìn)行導(dǎo)入導(dǎo)出。

  1. |--backpack 
  2.   |--src 
  3.     |--heading.js 
  4.     |--main.js 
  5.   |--index.html 
  6.   |--package.json 
  7.   |--webpack.config.js-------webpack配置文件 

webpack自定義的配置文件：

  1. // webpack.config.js 
  2. const path = require("path"); 
  3.  
  4. module.exports = { 
  5.   entry:"./src/index.js",//打包入口 
  6.   output:{//打包出口 
  7.     filename:"bundle.js",//命名打包后的文件 
  8.     path:path.join(__dirname,"output") 
  9.   }, 
  10.   // 打包模式 
  11.   mode:"none" 
  12. } 

執(zhí)行打包命令后會在項(xiàng)目根目錄下自動生成打包后的文件目錄，我們看到下面是執(zhí)行打包命令后生成的文件，生成的是一個(gè)立即執(zhí)行函數(shù)。

  1. /******/ (function(modules) { // webpackBootstrap  函數(shù) 
  2. /******/  // The module cache 
  3. /******/  var installedModules = {}; 
  4. /******/ 
  5. /******/  // The require function 
  6. /******/  function __webpack_require__(moduleId) { 
  7. /******/ 
  8. /******/   // Check if module is in cache 
  9. /******/   if(installedModules[moduleId]) { 
  10. /******/    return installedModules[moduleId].exports; 
  11. /******/   } 
  12. /******/   // Create a new module (and put it into the cache) 
  13. /******/   var module = installedModules[moduleId] = { 
  14. /******/    i: moduleId, 
  15. /******/    l: false, 
  16. /******/    exports: {} 
  17. /******/   }; 
  18. /******/ 
  19. /******/   // Execute the module function 
  20. /******/   modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
  21. /******/ 
  22. /******/   // Flag the module as loaded 
  23. /******/   module.l = true; 
  24. /******/ 
  25. /******/   // Return the exports of the module 
  26. /******/   return module.exports; 
  27. /******/  } 
  28. /******/ 
  29. /******/ 
  30. /******/  // expose the modules object (__webpack_modules__) 
  31. /******/  __webpack_require__.m = modules; 
  32. /******/ 
  33. /******/  // expose the module cache 
  34. /******/  __webpack_require__.c = installedModules; 
  35. /******/ 
  36. /******/  // define getter function for harmony exports 
  37. /******/  __webpack_require__.d = function(exports, name, getter) { 
  38. /******/   if(!__webpack_require__.o(exports, name)) { 
  39. /******/    Object.defineProperty(exports, name, { enumerable: true, get: getter }); 
  40. /******/   } 
  41. /******/  }; 
  42. /******/ 
  43. /******/  // define __esModule on exports 
  44. /******/  __webpack_require__.r = function(exports) { 
  45. /******/   if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 
  46. /******/    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 
  47. /******/   } 
  48. /******/   Object.defineProperty(exports, '__esModule', { value: true }); 
  49. /******/  }; 
  50. /******/ 
  51. /******/  // create a fake namespace object 
  52. /******/  // mode & 1: value is a module id, require it 
  53. /******/  // mode & 2: merge all properties of value into the ns 
  54. /******/  // mode & 4: return value when already ns object 
  55. /******/  // mode & 8|1: behave like require 
  56. /******/  __webpack_require__.t = function(value, mode) { 
  57. /******/   if(mode & 1) value = __webpack_require__(value); 
  58. /******/   if(mode & 8) return value; 
  59. /******/   if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 
  60. /******/   var ns = Object.create(null); 
  61. /******/   __webpack_require__.r(ns); 
  62. /******/   Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 
  63. /******/   if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 
  64. /******/   return ns; 
  65. /******/  }; 
  66. /******/ 
  67. /******/  // getDefaultExport function for compatibility with non-harmony modules 
  68. /******/  __webpack_require__.n = function(module) { 
  69. /******/   var getter = module && module.__esModule ? 
  70. /******/    function getDefault() { return module['default']; } : 
  71. /******/    function getModuleExports() { return module; }; 
  72. /******/   __webpack_require__.d(getter, 'a', getter); 
  73. /******/   return getter; 
  74. /******/  }; 
  75. /******/ 
  76. /******/  // Object.prototype.hasOwnProperty.call 
  77. /******/  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 
  78. /******/ 
  79. /******/  // __webpack_public_path__ 
  80. /******/  __webpack_require__.p = ""; 
  81. /******/ 
  82. /******/ 
  83. /******/  // Load entry module and return exports 
  84. /******/  return __webpack_require__(__webpack_require__.s = "./src/index.js"); 
  85. /******/ }) 
  86. /************************************************************************/ 
  87. /******/ ({ 
  88.  
  89. /***/ "./src/heading.js": 
  90. /*!************************!*\ 
  91.   !*** ./src/heading.js ***! 
  92.   \************************/ 
  93. /*! exports provided: default */ 
  94. /***/ (function(module, __webpack_exports__, __webpack_require__) { 
  95.  
  96. "use strict"; 
  97. eval("__webpack_require__.r(__webpack_exports__);\n// heading.js\n/* harmony default export */ __webpack_exports__[\"default\"] = (function(){\n  const element = document.createElement(\"div\");\n  element.textContent = \"hello yichuan\";\n  element.addEventListener(\"click\",()=>{\n    console.log(\"hello onechuan\");\n    return element\n  })\n});\n\n//# sourceURL=webpack:///./src/heading.js?"); 
  98.  
  99. /***/ }), 
  100.  
  101. /***/ "./src/index.js": 
  102. /*!**********************!*\ 
  103.   !*** ./src/index.js ***! 
  104.   \**********************/ 
  105. /*! no exports provided */ 
  106. /***/ (function(module, __webpack_exports__, __webpack_require__) { 
  107.  
  108. "use strict"; 
  109. eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _heading_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./heading.js */ \"./src/heading.js\");\n// index.js\n\ndocument.body.append(Object(_heading_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])())\n\n//# sourceURL=webpack:///./src/index.js?"); 
  110.  
  111. /***/ }) 
  112.  
  113. /******/ }); 

在上面打包之后的文件中，src目錄中的每個(gè)模塊對應(yīng)打包后文件中的一個(gè)函數(shù)，從而實(shí)現(xiàn)模塊的私有作用域，在此文件中還掛載了一些其他的數(shù)據(jù)和工具函數(shù)。

寫在后面

 

這篇文章主要寫了webpack上路使用，對于webpack的基本使用并不是很復(fù)雜，特別是在webpack4.0后，很多配置都已經(jīng)被簡化。在這種配置并不復(fù)雜的前提下，開發(fā)人員對它的掌握程度，主要體現(xiàn)在是否能夠理解它的工作機(jī)制和原理。

 

責(zé)任編輯：武曉燕 來源： 前端萬有引力
webpack原理模塊化
相關(guān)推薦

2021-12-24 08:01:44

Webpack優(yōu)化打包

2021-12-20 00:03:38

Webpack運(yùn)行機(jī)制

2021-12-25 22:29:04

WebpackRollup 前端

2021-12-15 23:42:56

Webpack原理實(shí)踐

2021-12-22 22:44:49

Webpack熱替換模塊

2021-12-19 07:21:48

Webpack 前端插件機(jī)制

2015-10-10 10:01:28

前端模塊化webpack

2010-02-03 09:01:01

Java動態(tài)模塊化

2021-12-17 00:02:28

Webpack資源加載

2017-03-24 10:56:21

Webpack技巧建議

2017-05-02 16:29:11

Webpack技巧建議

2021-12-21 14:00:25

WebpackDevServer的開發(fā)

2017-05-18 11:43:41

Android模塊化軟件

2024-05-27 00:00:01

2020-08-05 08:21:41

Webpack

2022-01-20 10:56:53

Webpack5持久化緩存

2010-01-21 09:27:30

模塊化的優(yōu)點(diǎn)NetBeans

2021-06-28 05:59:17

Webpack 前端打包與工程化

2021-05-31 05:36:43

WebpackJavaScript 前端

2022-05-03 20:48:17

Webpackcommonjsesmodule
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號