基本概念

• Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始讨惩，可抽象成輸入睁壁。
• Module：模塊，在 Webpack 里一切皆模塊歼郭，一個模塊對應(yīng)著一個文件遗契。
  Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。
• Chunk：代碼塊病曾，一個 Chunk 由多個模塊組合而成牍蜂，用于代碼合并與分割。
• Loader：模塊轉(zhuǎn)換器泰涂，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容鲫竞。
• Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時機(jī)會廣播出對應(yīng)的事件逼蒙，插件可以監(jiān)聽這些事件的發(fā)生从绘，在特定時機(jī)做對應(yīng)的事情。

流程細(xì)節(jié)

Webpack 的構(gòu)建流程可以分為以下三大階段：

• 初始化：啟動構(gòu)建，讀取與合并配置參數(shù)僵井，加載 Plugin赁还，實(shí)例化 Compiler。
• 編譯：從 Entry 出發(fā)驹沿，針對每個 Module 串行調(diào)用對應(yīng)的 Loader 去翻譯文件內(nèi)容艘策，再找到該 Module 依賴的 Module，遞歸地進(jìn)行編譯處理渊季。
• 輸出：對編譯后的 Module 組合成 Chunk朋蔫，把 Chunk 轉(zhuǎn)換成文件，輸出到文件系統(tǒng)却汉。

常用 Loaders

加載文件

• raw-loader：把文本文件的內(nèi)容加載到代碼中去驯妄。
• file-loader：把文件輸出到一個文件夾中，在代碼中通過相對 URL 去引用輸出的文件合砂。
• url-loader：和 file-loader 類似青扔，但是能在文件很小的情況下以 base64 的方式把文件內(nèi)容注入到代碼中去。
• source-map-loader：加載額外的 Source Map 文件翩伪，以方便斷點(diǎn)調(diào)試微猖。
• svg-inline-loader：把壓縮后的 SVG 內(nèi)容注入到代碼中。
• node-loader：加載 Node.js 原生模塊 .node 文件缘屹。
• image-loader：加載并且壓縮圖片文件凛剥。
• json-loader：加載 JSON 文件。
• yaml-loader：加載 YAML 文件轻姿。

編譯模版

• pug-loader：把 Pug 模版轉(zhuǎn)換成 JavaScript 函數(shù)返回犁珠。
• handlebars-loader：把 Handlebars 模版編譯成函數(shù)返回。
• ejs-loader：把 EJS 模版編譯成函數(shù)返回互亮。
• haml-loader：把 HAML 代碼轉(zhuǎn)換成 HTML犁享。
• markdown-loader：把 Markdown 文件轉(zhuǎn)換成 HTML。

轉(zhuǎn)換腳本語言

• babel-loader：把 ES6 轉(zhuǎn)換成 ES5豹休。
• ts-loader：把 TypeScript 轉(zhuǎn)換成 JavaScript炊昆。
• awesome-typescript-loader：把 TypeScript 轉(zhuǎn)換成 JavaScript，性能要比 ts-loader 好慕爬。
• coffee-loader：把 CoffeeScript 轉(zhuǎn)換成 JavaScript窑眯。

轉(zhuǎn)換樣式文件

• css-loader：加載 CSS，支持模塊化医窿、壓縮、文件導(dǎo)入等特性炊林。
• style-loader：把 CSS 代碼注入到 JavaScript 中姥卢，通過 DOM 操作去加載 CSS。
• sass-loader：把 SCSS/SASS 代碼轉(zhuǎn)換成 CSS。
• postcss-loader：擴(kuò)展 CSS 語法独榴，使用下一代 CSS僧叉。
• less-loader：把 Less 代碼轉(zhuǎn)換成 CSS 代碼。
• stylus-loader：把 Stylus 代碼轉(zhuǎn)換成 CSS 代碼棺榔。

檢查代碼

• eslint-loader：通過 ESLint 檢查 JavaScript 代碼瓶堕。
• tslint-loader：通過 TSLint 檢查 TypeScript 代碼。
• mocha-loader：加載 Mocha 測試用例代碼症歇。
• coverjs-loader：計算測試覆蓋率郎笆。

其它

• vue-loader：加載 Vue.js 單文件組件。
• i18n-loader：加載多語言版本忘晤，支持國際化宛蚓。
• ignore-loader：忽略掉部分文件。
• ui-component-loader：按需加載 UI 組件庫设塔，例如在使用 antd UI 組件庫時凄吏，不會因?yàn)橹挥玫搅?Button 組件而打包進(jìn)所有的組件。

常用 Plugins

用于修改行為

• define-plugin：定義環(huán)境變量闰蛔。
• context-replacement-plugin：修改 require 語句在尋找文件時的默認(rèn)行為痕钢。
• ignore-plugin：用于忽略部分文件。

用于優(yōu)化

• commons-chunk-plugin：提取公共代碼序六。
• extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代碼到單獨(dú)的文件中盖喷。
• prepack-webpack-plugin：通過 Facebook 的 Prepack 優(yōu)化輸出的 JavaScript 代碼性能。
• uglifyjs-webpack-plugin：通過 UglifyES 壓縮 ES6 代碼难咕。
• webpack-parallel-uglify-plugin：多進(jìn)程執(zhí)行 UglifyJS 代碼壓縮课梳，提升構(gòu)建速度。
• imagemin-webpack-plugin：壓縮圖片文件余佃。
• webpack-spritesmith：用插件制作雪碧圖暮刃。
• ModuleConcatenationPlugin：開啟 Webpack Scope Hoisting 功能。
• dll-plugin：借鑒 DDL 的思想大幅度提升構(gòu)建速度爆土。
• hot-module-replacement-plugin：開啟模塊熱替換功能椭懊。

其它

• serviceworker-webpack-plugin：給網(wǎng)頁應(yīng)用增加離線緩存功能。
• stylelint-webpack-plugin：集成 stylelint 到項(xiàng)目中步势。
• i18n-webpack-plugin：給你的網(wǎng)頁支持國際化氧猬。
• provide-plugin：從環(huán)境中提供的全局變量中加載模塊，而不用導(dǎo)入對應(yīng)的文件坏瘩。
• web-webpack-plugin：方便的為單頁應(yīng)用輸出 HTML盅抚，比 html-webpack-plugin 好用。