搜尋
首頁web前端js教程webpack模組實例教程
webpack模組實例教程Jun 26, 2017 am 10:13 AM
webwebpack模組解析

前面的话

  在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制。webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文件。本文将详细介绍webpack的模块解析

 

模块

  在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块

  每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的

  Node.js从最一开始就支持模块化编程。对比Node.js模块,webpack模块能够以各种方式表达它们的依赖关系

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件(<img  alt="webpack模組實例教程" >)中的图片链接(image url)

  [注意]webpack 1需要特定的loader来转换ES 2015 import,然而通过webpack 2可以开箱即用

【支持类型】

  webpack通过loader可以支持各种语言和预处理器编写模块。loader描述了webpack如何处理非JavaScript(non-JavaScript) 模块,并且在bundle中引入这些依赖。 webpack 社区已经为各种流行语言和语言处理器构建了loader,包括:

CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus

  总的来说,webpack提供了可定制的、强大和丰富的API,允许任何技术栈使用webpack,保持了在开发、测试和生成流程中无侵入性(non-opinionated)

 

模块解析

  resolver是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用,如下:

import foo from 'path/to/module'// 或者require('path/to/module')

  所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver帮助webpack找到bundle中需要引入的模块代码,这些代码在包含在每个require/import语句中。当打包模块时,webpack使用enhanced-resolve来解析文件路径

【解析规则】

  使用enhanced-resolve,webpack能够解析三种文件路径:

  1、绝对路径

import "/home/me/file";
import "C:\\Users\\me\\file";

  由于已经取得文件的绝对路径,因此不需要进一步再做解析

  2、相对路径

import "../src/file1";
import "./file2";

  在这种情况下,使用import或require的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在import/require中给定的相对路径,会添加此上下文路径(context path),以产生模块的绝对路径(absolute path)

  3、模块路径

import "module";
import "module/lib/file";

  模块将在resolve.modules中指定的所有目录内搜索。 可以替换初始模块路径,此替换路径通过使用resolve.alias配置选项来创建一个别名

  一旦根据上述规则解析路径后,解析器(resolver)将检查路径是否指向文件或目录

  如果路径指向一个文件:

    a、如果路径具有文件扩展名,则被直接将文件打包

    b、否则,将使用 [resolve.extensions] 选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受哪些扩展名(例如 .js, .jsx)

  如果路径指向一个文件夹,则采取以下步骤找到具有正确扩展名的正确文件:

    a、如果文件夹中包含 package.json 文件,则按照顺序查找 resolve.mainFields 配置选项中指定的字段。并且 package.json 中的第一个这样的字段确定文件路径

    b、如果package.json文件不存在或者package.json文件中的main字段没有返回一个有效路径,则按照顺序查找 esolve.mainFiles配置选项中指定的文件名,看是否能在import/require目录下匹配到一个存在的文件名

    c、文件扩展名通过 resolve.extensions 选项采用类似的方法进行解析

  webpack 根据构建目标(build target)为这些选项提供了合理的默认配置

【解析与缓存】

  Loader解析遵循与文件解析器指定的规则相同的规则。resolveLoader 配置选项可以用来为 Loader 提供独立的解析规则。

  每个文件系统访问都被缓存,以便更快触发对同一文件的多个并行或穿行请求。在观察模式下,只有修改过的文件会从缓存中摘出。如果关闭观察模式,在每次编译前清理缓存

 

依赖图表

  任何时候,一个文件依赖于另一个文件,webpack就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体),并且可以把它们作为依赖提供给应用程序

  webpack从命令行或配置文件中定义的一个模块列表开始,处理应用程序。 从这些入口起点开始,webpack 递归地构建一个依赖图表,这个依赖图表包含着应用程序所需的每个模块,然后将所有这些模块打包为少量的bundle(通常只有一个 )可由浏览器加载

 

构建目标

  因为服务器和浏览器代码都可以用JavaScript编写,所以webpack提供了多种构建目标(target),可以在webpack配置中设置

【用法】

  要设置target属性,只需要在webpack配置中设置target的值

//webpack.config.jsmodule.exports = {
  target: 'node'};

  在上面例子中,使用node webpack会编译为用于「类Node.js」环境(使用Node.js的require,而不是使用任意内置模块(如fs或path)来加载chunk)。

  每个target都有各种部署(deployment)/环境(environment)特定的附加项,以支持满足其需求

【多个Target】

  尽管webpack不支持向target传入多个字符串,可以通过打包两份分离的配置来创建同构的库

//webpack.config.jsvar path = require('path');var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }  //…};var clientConfig = {
  target: 'web', // 

  上面的範例將在的dist資料夾下建立lib.js和lib.node.js檔案

 

模組熱替換

  模組熱替換HMR( Hot Module Replacement)功能會在應用程式運行過程中取代、新增或刪除模組,而無需重新載入頁面。這使得可以在獨立模組變更後,無需刷新整個頁面,就可以更新這些模組,大大加速了開發時間

#【站在App的角度】

  1、app代碼要求HMR runtime 檢查更新

  2、HMR runtime (非同步)下載更新,然後通知app 代碼更新可用

  3、app 代碼要求HMR runtime 應用更新

  4、HMR runtime (非同步)應用更新

  可以設定HMR,使此進程自動觸發更新,或者可以選擇要求在用戶互動後進行更新

【站在編譯器(webpack)的角度】

  除了普通資源,編譯器(compiler)需要發出"update",以允許更新先前的版本到新的版本。 "update" 由兩個部分組成:1、待更新manifest (JSON);2、一個或多個待更新chunk (JavaScript);

  manifest 包括新的編譯 hash 和所有的待更新 chunk 目錄。

  每個待更新 chunk 包含用於與所有被更新模組相對應 chunk 的程式碼(或一個 flag 用來表示模組要被移除)。

  編譯器確保模組 ID 和 chunk ID 在這些建置之間保持一致。通常將這些ID 儲存在記憶體中(例如,當使用webpack-dev-server 時),但也可能將它們儲存在一個JSON 檔案中

【站在模組的角度】

  HMR 是選用功能,只會影響包含HMR 程式碼的模組。舉個例子,透過 style-loader 為 style 樣式追加補丁。 為了運行追加補丁,style-loader 實現了 HMR 介面;當它透過 HMR 接收到更新,它會使用新的樣式取代舊的樣式。

  類似的,當在一個模組中實現了 HMR 接口,可以描述出當模組被更新後發生了什麼。然而在多數情況下,不需要強制在每個模組中寫入 HMR 程式碼。如果一個模組沒有 HMR 處理函數,更新就會冒泡。這意味著一個簡單的處理函數能夠對整個模組樹(complete module tree)進行處理。如果在這個模組樹中,一個單獨的模組被更新,那麼整個模組樹都會被重新加載(只會重新加載,不會遷移)。

【站在HMR Runtime的角度】

  對於模組系統的 runtime,附加的程式碼被傳送到 parents 和 children 追蹤模組。

  在管理方面,runtime 支援兩個方法 check 和 apply。

  1、check 發送 HTTP 請求來更新 manifest。如果請求失敗,表示沒有可用更新。如果請求成功,待更新 chunk 會和目前載入過的 chunk 進行比較。對每個載入過的 chunk,會下載相對應的待更新 chunk。當所有待更新 chunk 完成下載,就會準備切換到 ready 狀態。

  2、apply 方法將所有被更新模組標記為無效。對於每個無效模組,都需要在模組中有一個更新處理函數,或在它的父級模組們中有更新處理函數。否則,無效標記冒泡,並將父級也標記為無效。每個冒泡繼續直到到達應用程式入口起點,或到達帶有更新處理函數的模組(以最先到達為準)。如果它從入口起點開始冒泡,則此過程失敗。

  之後,所有無效模組都被(透過 dispose 處理函數)處理和解除載入。然後更新目前 hash,並且呼叫所有 "accept" 處理函數。 runtime 切換回閒置狀態,一切照常繼續

  可以在開發過程中將 HMR 作為 LiveReload 的替代。 webpack-dev-server 支援熱模式,在試圖重新載入整個頁面之前,熱模式會嘗試使用 HMR 來更新

  一些 loader 已經產生可熱更新的模組。例如,style-loader 能夠置換出頁面的樣式表。對於這樣的模組,不需要做任何特殊處理

以上是webpack模組實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
VUE3入门教程:使用Webpack进行打包和构建VUE3入门教程:使用Webpack进行打包和构建Jun 15, 2023 pm 06:17 PM

Vue是一款优秀的JavaScript框架,它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue3是Vue的最新版本,它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一,它可以帮助我们管理项目中的各种资源。本文就为大家介绍如何使用Webpack打包和构建Vue3应用程序。1.安装Webpack

vite和webpack的区别是什么vite和webpack的区别是什么Jan 11, 2023 pm 02:55 PM

区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。

如何使用PHP和webpack进行模块化开发如何使用PHP和webpack进行模块化开发May 11, 2023 pm 03:52 PM

随着Web开发技术的不断发展,前后端分离、模块化开发已经成为了一个广泛的趋势。PHP作为一种常用的后端语言,在进行模块化开发时,我们需要借助一些工具来实现模块的管理和打包,其中webpack是一个非常好用的模块化打包工具。本文将介绍如何使用PHP和webpack进行模块化开发。一、什么是模块化开发模块化开发是指将程序分解成不同的独立模块,每个模块都有自己的作

vue webpack可打包哪些文件vue webpack可打包哪些文件Dec 20, 2022 pm 07:44 PM

在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在打包的过程中,可以对资源进行处理,如压缩图片、将scss转成css、将ES6语法转成ES5等可以被html识别的文件类型。

Webpack是什么?详解它是如何工作的?Webpack是什么?详解它是如何工作的?Oct 13, 2022 pm 07:36 PM

Webpack是一款模块打包工具。它为不同的依赖创建模块,将其整体打包成可管理的输出文件。这一点对于单页面应用(如今Web应用的事实标准)来说特别有用。

webpack怎么将es6转成es5的模块webpack怎么将es6转成es5的模块Oct 18, 2022 pm 03:48 PM

配置方法:1、用导入的方法把ES6代码放到打包的js代码文件中;2、利用npm工具安装babel-loader工具,语法“npm install -D babel-loader @babel/core @babel/preset-env”;3、创建babel工具的配置文件“.babelrc”并设定转码规则;4、在webpack.config.js文件中配置打包规则即可。

web前端打包工具有哪些web前端打包工具有哪些Aug 23, 2022 pm 05:31 PM

web前端打包工具有:1、Webpack,是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起,并且保证它们之间的引用正确,执行有序;2、Grunt,一个前端打包构建工具;3、Gulp,用代码方式来写打包脚本;4、Rollup,ES6模块化打包工具;5、Parcel,一款速度极快、零配置的web应用程序打包器;6、equireJS,是一个JS文件和模块加载器。

web是前端还是后端web是前端还是后端Aug 24, 2022 pm 04:10 PM

web有前端,也有后端。web前端也被称为“客户端”,是关于用户可以看到和体验的网站的视觉方面,即用户所看到的一切Web浏览器展示的内容,涉及用户可以看到,触摸和体验的一切。web后端也称为“服务器端”,是用户在浏览器中无法查看和交互的所有内容,web后端负责存储和组织数据,并确保web前端的所有内容都能正常工作。web后端与前端通信,发送和接收信息以显示为网页。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具