摘要:資源哈希編碼使用可以為每個(gè)包的名稱注入一個(gè)哈希值例如,,以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值,在內(nèi)容更改時(shí),可以作廢瀏覽器緩存中上個(gè)版本的包。
</>復(fù)制代碼
原文鏈接:https://survivejs.com/webpack...
翻譯計(jì)劃:https://segmentfault.com/a/11...
涉及到的未翻譯單詞
input 輸入
output 輸出
entry 入口文件
bundle 包(打包結(jié)果)
Webpack 是模塊打包器。它可以在打包的同時(shí)使用任務(wù)運(yùn)行器。然而,由于社區(qū)開發(fā)的 webpack 插件,打包器和任務(wù)運(yùn)行器之間的界限變得模糊。有時(shí),這些插件甚至獨(dú)立于 webpack 使用,例如清理構(gòu)建目錄或部署構(gòu)建使用的插件。
(譯者注:grunt 之類的任務(wù)運(yùn)行器,就是自動幫你走一次如“組合兩個(gè) js 文件--壓縮 js--壓縮 css”這樣流程的工具)
Webpack 也可以在其他環(huán)境中的使用,例如 Ruby on Rails。盡管它的名字帶有 web,但 webpack 并不僅限于 web。它也可以打包其他東西,這點(diǎn)在 Build Targets 章節(jié)中會提到。
T> 如果你想更詳細(xì)地了解構(gòu)建工具及其歷史,請查看附錄 Comparison of Build Tools。
Webpack 基于模塊使用 webpack 構(gòu)建工程,至少包括 input 和 output。打包處理從用戶定義的 entry 開始。entry 本身就是模塊,它可以通過 import 指向其他模塊。
當(dāng)你使用 webpack 打包項(xiàng)目時(shí),它會遍歷 import,構(gòu)建項(xiàng)目的依賴關(guān)系圖,然后根據(jù)配置文件中的設(shè)定生成 output。你還可以定義分割點(diǎn),以在項(xiàng)目代碼內(nèi)拆分出多帶帶的 bundle(包)。
Webpack 支持開箱即用的 ES2015,CommonJS 和 AMD 模塊標(biāo)準(zhǔn)。loader 機(jī)制也適用于 CSS,通過 css-loader 在 css 文件中使用 @import 和 url()。你還可以找到某些實(shí)現(xiàn)特定功能的插件,例如壓縮,國際化,HMR等。
T> 依賴圖是描述節(jié)點(diǎn)如何相互關(guān)聯(lián)的有向圖。這個(gè)圖是通過文件之間的引用(require,import)構(gòu)建的。Webpack 會在不執(zhí)行資源的情況下靜態(tài)遍歷這些資源,并生成創(chuàng)建 bundle 所需的依賴圖。
Webpack 的執(zhí)行流程Webpack 從 entry 開始運(yùn)行。entry 通常是 JavaScript 模塊,webpack 從這里開始遍歷處理。在此過程中,webpack 根據(jù) loader 配置轉(zhuǎn)換每個(gè)匹配到的模塊。
模塊解析Entry 本身就是一個(gè)模塊。當(dāng) webpack 遇到 entry,webpack 會在文件系統(tǒng)匹配相關(guān)文件。除了 node_modules 之外,webpack 還可以對特定目錄執(zhí)行查找。也可以調(diào)整 webpack 匹配文件擴(kuò)展名的方式,也可以為目錄定義 aliases(別名)。這方面在 Consuming Packages 章節(jié)有更詳細(xì)的介紹。
如果 webpack 正確解析文件,對應(yīng) loader 會處理匹配的文件,不同的 loader 對模塊內(nèi)容應(yīng)用的轉(zhuǎn)換各不相同。如果解析失敗,webpack 會報(bào)運(yùn)行時(shí)錯(cuò)誤。
loader 可以通過多種方式匹配待處理文件,如文件類型和文件的位置。 Webpack 甚至可以讓你按 import 位置分類,不同位置 import 的文件采用不同的轉(zhuǎn)換方法。
對 webpack loader 執(zhí)行相同的解析過程。 你可以在選擇 loader 時(shí)使用相同的邏輯。由于這個(gè)原因,Loader 已經(jīng)解析了自己的配置。如果 webpack 查找 loader 失敗,則會引發(fā)運(yùn)行時(shí)錯(cuò)誤。
T> Webpack 的解釋底層依賴于 enhanced-resolve 包。
Webpack 可以解析任何類型的文件Webpack 將在構(gòu)造依賴圖時(shí)解析它遇到的每個(gè)模塊。如果 entry 包含依賴項(xiàng),則將針對每個(gè)依賴項(xiàng)遞歸執(zhí)行該過程,直到遍歷完成為止。 Webpack 可以針對任何文件類型執(zhí)行此過程,這與 Babel 或 Sass 編譯器等專用工具不同。
Webpack 可以控制對不同資源的處理方式。例如,可以把資源內(nèi)聯(lián)到 JavaScript 包以避免過多的網(wǎng)絡(luò)請求(譯者注:例如圖片轉(zhuǎn) base64)。Webpack 還允許你使用 CSS 模塊等技術(shù)將樣式與組件結(jié)合,并避免標(biāo)準(zhǔn) CSS 樣式問題。這種靈活性是 webpack 價(jià)值的體現(xiàn)。
盡管 webpack 主要用于打包 JavaScript,但它可以捕獲圖像或字體等資源,并為它們抽取為多帶帶的文件。Entry 只是打包處理的起點(diǎn)。 webpack 生成的內(nèi)容完全取決于你配置它的方式。
處理流程Webpack 會下到上、從右到左地(styleLoader(cssLoader("./main.css")))處理匹配成功的加載器,模塊會依次通過 loader 的處理。最后,你將獲得 webpack 輸出的包。Loader Definitions 章節(jié)詳細(xì)介紹了該主題。
如果所有 loader 都成功運(yùn)行,則 webpack 會在最后一個(gè)包中包含源。 Plugins 可以在打包過程的不同階段攔截運(yùn)行時(shí)事件。
雖然 loader 可以做很多事情,但它們不能為高級任務(wù)提供足夠的動力。Plugins 可以攔截 webpack 提供的運(yùn)行時(shí)事件。一個(gè)很好的例子是由 MiniCssExtractPlugin 執(zhí)行的包提取,當(dāng)與 loader 一起使用時(shí),從包中提取 CSS 文件并將其提取到多帶帶的文件中。如果沒有這一步,CSS 將在生成的 JavaScript 中內(nèi)聯(lián),因?yàn)?webpack 默認(rèn)將所有代碼視為 JavaScript。CSS 提取將在 Separating CSS 一章中討論。
完成每個(gè)模塊都經(jīng)過處理之后,webpack 生成 output。output 包括一個(gè)引導(dǎo)腳本,其中包含一個(gè)指引瀏覽器執(zhí)行該項(xiàng)目的 manifest 文件。可以將 manifest 提取到多帶帶的文件中,本書后面會有相關(guān)介紹。output 會根據(jù)你使用的 build target 而有所不同(Web 不是唯一選擇)。
這并不是打包過程的全部內(nèi)容。例如,你可以做代碼拆分,webpack 會在程序運(yùn)行到所需功能時(shí)才加載的多帶帶包。這個(gè)話題會在 Code Splitting 章節(jié)中討論。
配置驅(qū)動的 Webpackwebpack 的核心依賴于配置。以下是根據(jù)官方 webpack 教程改編的配置示例證明:
webpack.config.js
</>復(fù)制代碼
const webpack = require("webpack");
module.exports = {
// Where to start bundling
entry: {
app: "./entry.js",
},
// Where to output
output: {
// Output to the same directory
path: __dirname,
// Capture name from the entry using a pattern
filename: "[name].js",
},
// How to resolve encountered imports
module: {
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /.js$/,
use: "babel-loader",
exclude: /node_modules/,
},
],
},
// What extra processing to perform
plugins: [
new webpack.DefinePlugin({ ... }),
],
// Adjust module resolution algorithm
resolve: {
alias: { ... },
},
};
Webpack 的配置模型有時(shí)候會讓人感覺霧里看花,因?yàn)榕渲梦募嫶螅瑢傩蕴唷3悄憷斫饷恳粋€(gè)屬性的意義,否則很難理解 webpack 在做什么。讓你完全理解 webpack 配置的使用,是本書存在的主要目的之一。
資源哈希編碼使用 webpack 可以為每個(gè)包的名稱注入一個(gè)哈希值(例如,app.d587bbd6.js),以便在版本更新后使客戶端上舊版本的包無效(重新下載)。包(bundle)拆分可以讓客戶端在理想情況下僅重新加載一小部分?jǐn)?shù)據(jù)。
熱模塊更換(HMR)你可能使用過 LiveReload 或 BrowserSync 等工具。這些工具會在你進(jìn)行更改時(shí)自動刷新瀏覽器。熱模塊更換(HMR)則更先進(jìn),在使用 React 的情況下,應(yīng)用程序可以在不強(qiáng)制刷新頁面的情況下更新應(yīng)用。雖然這聽起來沒什么特別,但它可以在實(shí)踐中大有不同。
HMR 不是webpack獨(dú)有的功能,通過 livereactload 也可以在 Browserify 中使用 HMR。
代碼拆分Webpack 可以以多種方式拆分代碼。你甚至可以在應(yīng)用程序執(zhí)行時(shí)動態(tài)加載代碼。因?yàn)橐蕾嚳梢愿鶕?jù)需要即時(shí)加載,所以延遲加載特別適用于體積龐大的應(yīng)用。
即使是小型應(yīng)用也可以得益于代碼拆分,因?yàn)樗试S用戶更快地獲得可用的東西。畢竟,性能是評價(jià)一個(gè)應(yīng)用的重要標(biāo)準(zhǔn),了解這項(xiàng)技術(shù)是值得的。
結(jié)論Webpack 學(xué)習(xí)曲線比較陡峭。但是有了它,項(xiàng)目的長期維護(hù)可以節(jié)省多少時(shí)間和精力,所以這是一個(gè)非常值得學(xué)習(xí)的工具。為了更好地了解 Webpack 與其他工具的比較,請查看官網(wǎng)上與其他工具的比較。
Webpack 不是萬能的。但它確實(shí)很好地解決了打包問題。在開發(fā)過程中需要擔(dān)心的問題又少了一件。活用 package.json 和 webpack,走遍天下都不怕。
總結(jié)一下:
Webpack 是模塊打包器,但你也可以使用它運(yùn)行任務(wù)(譯者注:也就是順序運(yùn)行一系列操作)。
Webpack 底層基于依賴圖。Webpack 遍歷源文件構(gòu)建依賴圖,并以依賴圖和配置為基礎(chǔ)生成 bundle。
Webpack 依賴于 loader 和 plugin。loader 在模塊級別上運(yùn)行,而 plugin 依賴于 webpack 提供的鉤子,并且可以很好地訪問其執(zhí)行過程。
Webpack 的配置描述了如何轉(zhuǎn)換“依賴圖”中的資源以及它應(yīng)該生成什么樣的輸出。如果要使用代碼拆分等功能,則可以將拆分指令寫在源代碼中。
Webpack 如此受人喜愛的原因之一是熱模塊更換(HMR)。這個(gè)功能可以不刷新整頁而更新應(yīng)用代碼,開發(fā)體驗(yàn)極好。
Webpack 可以為文件名生成哈希值,在內(nèi)容更改時(shí),可以作廢瀏覽器緩存中上個(gè)版本的包。
在本書的下一部分中,你將學(xué)習(xí)使用 webpack 構(gòu)建開發(fā)配置,同時(shí)了解更多相關(guān)概念。
T> 如果你對 webpack 仍有疑問或者不明白我們?yōu)槭裁葱枰粋€(gè)打包器,請閱讀Why would I use a Webpack?。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/96880.html
摘要:通過使用,或等方案,可以獲得更加可控的環(huán)境。使用它來管理項(xiàng)目依賴。前者安裝并寫入字段,而后者則寫入。先安裝在中使用配置完成后,嘗試以下操作運(yùn)行構(gòu)建項(xiàng)目。運(yùn)行進(jìn)入構(gòu)建目錄。本地依賴項(xiàng)也適用于持續(xù)集成環(huán)境。 原文鏈接:https://survivejs.com/webpack...翻譯計(jì)劃:https://segmentfault.com/a/11... 在開始之前,請確保你使用的是 N...
摘要:把他設(shè)置為以在其他之前或之后進(jìn)行處理。基于布爾值的字段可用于進(jìn)一步進(jìn)行約束不匹配給定條件參見表示接受的值。同時(shí)匹配一系列條件。將此添加到你的配置即可檢查其中的數(shù)據(jù)流,而不必在中插入。 原文鏈接:https://survivejs.com/webpack...翻譯計(jì)劃:https://segmentfault.com/a/11...附言:因?yàn)榘l(fā)現(xiàn)書中一些內(nèi)容單獨(dú)放出來會比較尷尬,所以會跳...
摘要:名稱后自動自動補(bǔ)全的功能將被移除在配置時(shí),官方不再允許省略擴(kuò)展名,的配置寫法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項(xiàng)傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過傳入到配置項(xiàng)中,如你會發(fā)現(xiàn)這將不會被允許,的執(zhí)行將會遵循更為嚴(yán)格的標(biāo)準(zhǔn)。 歷時(shí)多日,webpack2.2正式版終于趕在年前發(fā)布了,此次更新相對于1.X版本有了諸多的升級優(yōu)化改進(jìn),筆者也在第一時(shí)間查閱了官方的文檔,整理和翻譯了由w...
摘要:提供了完整的環(huán)境,并且支持自定義域名指向,動態(tài)計(jì)算資源調(diào)整,可以完成各種應(yīng)用的開發(fā)編譯與部署。 react 新特性 react16 Context 算法相關(guān) 圖解排序算法(二)之希爾排序 微信小程序 微信小程序組件化的解決方案移動端尺寸基本知識 瀏覽器 前端必讀:瀏覽器內(nèi)部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關(guān)系瀏覽器緩存 CSS學(xué)習(xí) 移動web開發(fā)布局入...
摘要:名稱后自動自動補(bǔ)全的功能將被移除在配置時(shí),官方不再允許省略擴(kuò)展名,的配置寫法上將逐步趨于嚴(yán)謹(jǐn)。使用自定義參數(shù)作為配置項(xiàng)傳入方式將做調(diào)整如果你隨意將自定義參數(shù)通過傳入到配置項(xiàng)中,如你會發(fā)現(xiàn)這將不會被允許,的執(zhí)行將會遵循更為嚴(yán)格的標(biāo)準(zhǔn)。 從 webpack v1 遷移到 webpack v2 新特性 歡迎小伙伴們?yōu)? 前端導(dǎo)航平臺 點(diǎn)star github倉庫: https://githu...
閱讀 3653·2021-11-23 09:51
閱讀 1995·2021-11-16 11:42
閱讀 3245·2021-11-08 13:20
閱讀 1100·2019-08-30 15:55
閱讀 2210·2019-08-30 10:59
閱讀 1245·2019-08-29 14:04
閱讀 1029·2019-08-29 12:41
閱讀 2029·2019-08-26 12:22