babel-loader ：轉換es6、es7等
js新特性語法。
css-loader：支援.css檔案的載入和解析
轉換成commonjs物件
style-loader：將樣式通過
標籤插入到head中
less-loader ：將less檔案轉換成
cssts-loader：將ts轉換成
jsfile-loader：進行、文字等的打包、富**檔案、字型。
raw-loader：將檔案以字串的形式匯入。
thread-loader：多程序打包js和
csscleanwebpackplugin：清理構建目錄
extracttextwebpackplugin：將css從
bundle
檔案裡提取成獨立的
css檔案
htmlwebpackplugin：建立html檔案去承載輸出的
bundle
uglifywebpackplugin：壓縮js
postcss + autoprefixer： ⾃動補⻬ css3 字首。
px2rem-loader：移動端 css px ⾃動轉換成 rem。 ⻚⾯渲染時計算根元素的 font-size 值，可以使⽤⼿淘的lib-flexible庫換成
rem。
熱更新
hotmodulereplacementplugin
原理：分為第一次打包和第二次打包，第一次打包將js**打包成
bundle.js
傳給bundle server
然後讓客戶端可以以
loacalhost8080
這種伺服器訪問的方式訪問。第二次，當我修改了**之後，
webpack
會打補丁一樣，將修改的部分打包，然後給到
hmr server
，這個伺服器就會以字串的形式，告訴
hmr runtime
，哪些地方被修改了，哪些地方需要更新。
檔案指紋：用來做版本的管理，比如某個檔案修改了，並不需要把所有的檔案都
發布，只要發布修改了的那部分就行了。
檔案指紋
chunkhash：和 webpack 打包的 chunk 有關，不同的 entry 會⽣成不同的 chunkhash 值
contenthash：根據⽂件內容來定義 hash ，⽂件內容不變，則 contenthash 不變。
效能優化：
l js壓縮：內建了 uglifyjs-webpack-plugin，webpack4如果
mode
設定成production
那麼將會自動的進行壓縮。
l css⽂件的壓縮：使⽤ optimize-css-assets-webpack-plugin。同時使⽤ cssnano。
l html⽂件的壓縮：html-webpack-plugin。
l 基礎庫分離：html-webpackexternals-plugin。思路：將 react、
react-dom
基礎包通過
cdn
引⼊，不打⼊ bundle 中。
l 公共指令碼分離：splitchunksplugin，分離⻚⾯公共⽂件。
l tree shaking(搖樹優化
)：個模組可能有多個⽅法，只要其中的某個⽅法使⽤到了，則整個⽂件都會被打到bundle ⾥⾯去， tree shaking 就是只把⽤到的⽅法打⼊ bundle ， 沒⽤到的⽅法會在uglify 階段被擦除掉。
l scope hoisting
現象：構建後的bundle.js**存在⼤量閉包**. 運⾏**時建立的函式作⽤域變多，記憶體開銷變⼤,⼤量作⽤域包裹**，導致體積增⼤（模組越多越明顯）
結論:被
webpack
轉換後的模組會帶上⼀層包裹。import 會被轉換成
__webpack_require
分析：
· 打包出來的是⼀個匿名閉包
· modules 是⼀個陣列，每⼀項是⼀個模組初始化函式
· 通過
webpack_require_method(0)
啟動程式
原理：
將所有模組的**按照引⽤順序放在⼀個函式作⽤域⾥，然後適當的重新命名一些變數以防⽌變數名衝突。
對⽐：通過 scope hoisting 可以減少函式宣告**和記憶體開銷。
l **分割：
對於⼤的 web 應⽤來講，將所有的**都放在⼀個⽂件中顯然是不夠有效的，特別是當你的某些**塊是在某些特殊的時候才會被使⽤到。 webpack 有⼀個功能就是將你的**庫分割成chunks（語塊），當**運⾏到需要它們的時候再進⾏載入。
懶載入：plugin-syntax-dynamic-import
服務端渲染：html + css + js + data -> 渲染後的
html。
所有模板等資源都儲存在服務端，內⽹機器拉取資料更快，⼀個 html 返回所有資料
客戶端渲染：多個請求（html，資料），
html
和資料序列載入、前端渲染。
服務端渲染
：乙個請求，返回html和資料。核心是減少請求。
服務端渲染優勢：減少⽩屏時間、對於 seo 友好
。客戶端渲染剛開始拉下來的html其實是乙個空的模板，而服務端渲染拉下來的時候頁面就有資料比較豐富，有利於爬蟲抓取資料。
思路：使⽤ react-dom/server 的
rendertostring ⽅法將react 元件渲染成字串
，再把這個string丟到
html
模板裡面去，
服務端路由返回對應的模板。
做法：使⽤打包出來的瀏覽器端 html 為模板，在模板中設定佔位符，動態插⼊元件，就可以解決樣式不顯示的問題。通過設定佔位符，服務端獲取資料然後替換佔位符。
多頁應用：每⼀次⻚⾯跳轉的時候，後台伺服器都會給返回⼀個新的 html ⽂檔，這種型別的⽹站也就是多⻚⽹站，也叫做多⻚應⽤。glob.sync。
webpack 效能優化
1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...
webpack 效能優化
構建速度 1 優化babel loader 開啟babel loader?cachedirectory，指定範圍 2 ignoreplugin 比如一些外掛程式，預設含有多語言檔案，比如moment.js new webpackignoreplugin locale,moment 去掉所有語言包 然...
Webpack效能優化
在使用webpack打包的時候，當我們的專案工程越來越大的時候就會出現打包的時間越來越長，這個時候需要對打包資源進行一系列的優化。對於 loader 來說，影響打包效率首當其衝必屬 babel 了。因為 babel 會將 轉為字串生成 ast，然後對 ast 繼續進行轉變最後再生成新的 專案越大，轉...