https://blog.csdn.net/weixin_44135121/article/details/89873416
筆記https://blog.csdn.net/z591391960/article/details/105612471
實現(xiàn)一個loader和plugins
1. webpack 性能優(yōu)化 在進行項目打包的時候蔼囊，當使用babel-loader進行js兼容時沫屡，不需要將node_modules模塊下的所有js文件進行打包。
2. webpack loaders中的include/exclude有什么用柴梆？
3. 我什么時候在Webpack 2 module.rules中使用’use’和’loader’拂铡？
4. 【webpack】中resolveLoader的使用方法
5. 自定義 loader 去刪除全局console.log
6. plugin 和 loader 的區(qū)別?
loader
- loader 是文件加載器壹无，能夠加載資源文件，并對這些文件進行一些處理感帅，諸如編譯斗锭，壓縮等，最終一起打包到指定的文件中失球。處理一個文件可以使用多個 loader岖是，loader 的執(zhí)行順序和配置文件是相反的，即最后一個 loader 最先執(zhí)行实苞，第一個 loader 最后一個執(zhí)行豺撑。第一個執(zhí)行的 loader 接收源文件內(nèi)容作為參數(shù)，其他 loader 接收前一個執(zhí)行的loader 的返回值作為參數(shù)硬梁，最后執(zhí)行的 loader 會返回此模塊的 Javascript 源碼前硫。
- 編寫自己的 loader 時需要引用官方提供的 loader-utils，調(diào)用 loaderUtils.getOptions(this) 拿到 webpack 的配置參數(shù)荧止，然后進行自己的處理。loader 本身僅僅是一個函數(shù)阶剑，接收模塊代碼的內(nèi)容跃巡，然后返回代碼內(nèi)容轉(zhuǎn)換后的結(jié)果，并且一個文件還可以連是的經(jīng)過多個 loader 轉(zhuǎn)化牧愁。
- 一個 loader 的職責是單一的素邪，只需要完成一種轉(zhuǎn)化。如果一個源文件需要經(jīng)歷多步轉(zhuǎn)化才能正常使用猪半，就通過多個loader 去轉(zhuǎn)化兔朦。在調(diào)用多個 loader 去轉(zhuǎn)化一個文件時，每個 loader 會鏈式的順序執(zhí)行磨确，第一個 loader 將會拿到需處理的原內(nèi)容沽甥，上一個 loader 處理后的結(jié)果會傳給下一個接著處理。最后的 loader 將處理后的最終結(jié)果返回給 Webpack乏奥。
plugin
- plugin 功能強大摆舟，loader 不能做的都是它做，它的功能要更加豐富。從 打包優(yōu)化和壓縮恨诱，到重新定義環(huán)境變量媳瞪，可以處理各種任務(wù)。
- plugin 讓 webpack 的機制更加靈活照宝，它 在編譯過程中留下的一系列生命周期的鉤子蛇受，通過調(diào)用這些鉤子來實現(xiàn)在不同編譯結(jié)果時對原模塊進行處理。它的編譯是基于事件流來編譯的厕鹃，主要通過 taptable 來實現(xiàn)插件的綁定和執(zhí)行的龙巨，taptable 是基于發(fā)布訂閱執(zhí)行的插件架構(gòu)，是用來創(chuàng)建聲明周期鉤子的庫熊响。調(diào)用 complier.hooks.run.tap 開始注冊旨别，創(chuàng)建 compilation,基于配置創(chuàng)建 chunks，在通過 parser 解析 chunks汗茄，使用模塊和依賴管理模塊之間的依賴關(guān)系秸弛，最后使用 template 基于 compilation 數(shù)據(jù)生成代碼結(jié)果。
7. webpack怎么處理圖片
https://www.jb51.net/article/161272.htm
8. webpack打包過程
9. 提升webpack打包速度
10. webpack機制是什么洪碳，主要哪幾部分
https://blog.csdn.net/weixin_43334673/article/details/107598708
https://blog.csdn.net/u014168594/article/details/77198729?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs
從啟動構(gòu)建到輸出結(jié)果一系列過程：
（1）初始化參數(shù)：解析webpack配置參數(shù)递览，合并shell傳入和webpack.config.js文件配置的參數(shù)，形成最后的配置結(jié)果瞳腌。
（2）開始編譯：上一步得到的參數(shù)初始化compiler對象绞铃，注冊所有配置的插件，插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點嫂侍，做出相應(yīng)的反應(yīng)儿捧，執(zhí)行對象的 run 方法開始執(zhí)行編譯。
（3）確定入口：從配置的entry入口挑宠，開始解析文件構(gòu)建AST語法樹菲盾，找出依賴，遞歸下去各淀。
（4）編譯模塊：遞歸中根據(jù)文件類型和loader配置懒鉴，調(diào)用所有配置的loader對文件進行轉(zhuǎn)換，再找出該模塊依賴的模塊碎浇，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理临谱。
（5）完成模塊編譯并輸出：遞歸完事后，得到每個文件結(jié)果奴璃，包含每個模塊以及他們之間的依賴關(guān)系悉默，根據(jù)entry配置生成代碼塊chunk。
（6）輸出完成：輸出所有的chunk到文件系統(tǒng)溺健。
注意：在構(gòu)建生命周期中有一系列插件在做合適的時機做合適事情麦牺，比如UglifyPlugin會在loader轉(zhuǎn)換遞歸完對結(jié)果使用UglifyJs壓縮覆蓋之前的結(jié)果钮蛛。
11. 常用loader和plugin
loader
file-loader：文件加載。
url-loader：文件加載剖膳，可以設(shè)置閾值魏颓，小于時把文件 base64 編碼。
image-loader：加載并壓縮圖片吱晒。
json-loader：webpack 默認包含甸饱。
babel-loader：ES6+ 轉(zhuǎn)成 ES5。
ts-loader：ts轉(zhuǎn)化為js仑濒。
awesome-typescript-loader：將 ts 轉(zhuǎn)換為 js叹话，性能更好。
css-loader：處理 @import 和 url 這樣的外部資源墩瞳。
style-loader：在 head 創(chuàng)建 style 標簽把樣式插入驼壶。
postcss-loader：擴展 css 語法，使用 postcss 各種插件 autoprefixer喉酌，cssnext热凹，cssnano。
eslint-loader,tslint-loader：規(guī)范代碼泪电。
vue-loader：加載 vue 單文件組件般妙。
i18n-loader：國際化。
cache-loader：性能開銷大的 loader 前添加相速，將結(jié)果緩存到磁盤碟渺。
svg-inline-loader：壓縮后的 svg 注入代碼。
source-map-loader：加載 source Map 文件突诬，方便調(diào)試苫拍。
expose-loader：暴露對象為全局變量。
import-loader攒霹，export-loader：可以向模塊注入變量或者提供導(dǎo)出模塊功能怯疤。
raw-loader：可以將文件以字符串形式返回。
plugin
ignore-plugin：忽略文件催束。
uglifyjs-webpack-plugin：webpack4之前，壓縮和混淆代碼伏社，不支持 ES6 壓縮抠刺。
terser-webpack-plugin：webpack4，壓縮和混淆代碼摘昌，支持 ES6 壓縮速妖。
webpack-parallel-uglify-plugin：多進程執(zhí)行代碼壓縮，提升構(gòu)建速度聪黎。
mini-css-extract-plugin：分離樣式文件罕容，css 提取為獨立文件，支持按需加載。
serviceworker-webpack-plugin：為網(wǎng)頁添加離線緩存功能锦秒。
clean-webpack-plugin：目錄清理露泊。
speed-measure-webpack-plugin：可以看見每個 loader 和 plugin 執(zhí)行耗時。
ProvidePlugin：自動加載模塊旅择，代替 require 和 import惭笑。
html-webpack-plugin：可以根據(jù)模板自動生成 html 代碼，并自動引用 css 和 js 文件生真。
extract-text-webpack-plugin：將 JS 文件中引用的樣式單例抽離成 css沉噩。
DefinePlugin：編譯時配置全局變量，這對開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用柱蟀。
HosModuleReplacementPlugin：熱更新川蒙。
DllPlugin 和 DllReferencePlugin 相互配合，前者第三方包的構(gòu)建长已，只構(gòu)建業(yè)務(wù)代碼畜眨。
optimize-css-assets-webpack-plugin：不同組件中重復(fù)的 css 可以快速去重。
webpack-bundle-analyzer：一個 webpack 的 bundle 文件分析工具痰哨。
compression-webpack-plugin：生產(chǎn)環(huán)境可采用 gzip 壓縮 JS 和 CSS胶果。
happypack：通過多進程模型，來加速代碼構(gòu)建斤斧。
