Webpack 是一個(gè)打包模塊化 JavaScript 的工具肢簿，在 Webpack 里一切文件皆模塊湾碎，通過 Loader 轉(zhuǎn)換文件球昨，通過 Plugin 注入鉤子烤蜕，最后輸出由多個(gè)模塊組合成的文件。Webpack 專注于構(gòu)建模塊化項(xiàng)目韵吨。
構(gòu)建的作用
構(gòu)建其實(shí)是工程化、自動(dòng)化思想在前端開發(fā)中的體現(xiàn)移宅，把一系列流程用代碼去實(shí)現(xiàn)归粉，讓代碼自動(dòng)化地執(zhí)行這一系列復(fù)雜的流程。把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行 JavaScrip漏峰、CSS糠悼、HTML 代碼，包括如下內(nèi)容浅乔。代碼轉(zhuǎn)換：TypeScript 編譯成 JavaScript倔喂、SCSS 編譯成 CSS 等铝条。
文件優(yōu)化：壓縮 JavaScript、CSS席噩、HTML 代碼班缰，壓縮合并圖片等。
代碼分割：提取多個(gè)頁面的公共代碼悼枢、提取首屏不需要執(zhí)行部分的代碼讓其異步加載埠忘。
模塊合并：在采用模塊化的項(xiàng)目里會(huì)有很多個(gè)模塊和文件，需要構(gòu)建功能把模塊分類合并成一個(gè)文件馒索。
自動(dòng)刷新：監(jiān)聽本地源代碼的變化莹妒，自動(dòng)重新構(gòu)建、刷新瀏覽器绰上。
代碼校驗(yàn)：在代碼被提交到倉庫前需要校驗(yàn)代碼是否符合規(guī)范旨怠，以及單元測(cè)試是否通過。
自動(dòng)發(fā)布：更新完代碼后蜈块，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)运吓。
webpack核心概念
Webpack 在執(zhí)行構(gòu)建時(shí)默認(rèn)會(huì)從項(xiàng)目根目錄下的 webpack.config.js 文件讀取配置，常用配置內(nèi)容如下：
Entry：入口疯趟，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始拘哨，可抽象成輸入。
Module：模塊信峻，在 Webpack 里一切皆模塊倦青，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。Webpack 會(huì)從配置的 Entry 開始遞歸找出所有依賴的模塊盹舞。
Chunk：代碼塊产镐，一個(gè) Chunk 由多個(gè)模塊組合而成，用于代碼合并與分割踢步。
Loader：可以看作具有文件轉(zhuǎn)換功能的翻譯員癣亚，配置里的 module.rules 數(shù)組配置了一組規(guī)則，告訴 Webpack 在遇到哪些文件時(shí)使用哪些 Loader 去加載和轉(zhuǎn)換获印。Webpack 不原生支持解析 CSS 文件述雾。要支持非 JavaScript 類型的文件，需要使用 Webpack 的 Loader 機(jī)制
Plugin：Plugin 是用來擴(kuò)展 Webpack 功能的兼丰，通過在構(gòu)建流程里注入鉤子實(shí)現(xiàn)玻孟。Webpack 是通過 plugins 屬性來配置需要使用的插件列表的。 plugins 屬性是一個(gè)數(shù)組鳍征，里面的每一項(xiàng)都是插件的一個(gè)實(shí)例黍翎，在實(shí)例化一個(gè)組件時(shí)可以通過構(gòu)造函數(shù)傳入這個(gè)組件支持的配置屬性。
Output：輸出結(jié)果艳丛，在 Webpack 經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果匣掸。
DevServer(官方提供的開發(fā)工具 )：提供 HTTP 服務(wù)而不是使用本地文件預(yù)覽趟紊。DevServer 啟動(dòng)后會(huì)一直駐留在后臺(tái)保持運(yùn)行，訪問這個(gè)網(wǎng)址你就能獲取項(xiàng)目根目錄下的 index.html碰酝。
啟動(dòng)實(shí)時(shí)預(yù)覽： webpack --watch 來開啟監(jiān)聽模式霎匈。
啟動(dòng)模塊熱替換： 在啟動(dòng) DevServer 時(shí)帶上 --hot 參數(shù)
啟動(dòng)sourceMap ：在啟動(dòng)時(shí)帶上 --devtool source-map 參數(shù)
