1.webpack是什么？
webpack一個(gè)用于現(xiàn)代javascript應(yīng)用程序的靜態(tài)模塊打包工具
2.webpack的配置有哪些微王？
入口（entry）,出口（output）,mode,plugin,loader屡限；
入口：指示webpack使用哪個(gè)模塊作為構(gòu)建其內(nèi)部依賴圖的開始。默認(rèn)值是：‘./src/index.js’炕倘。
出口：告訴webpack在哪里輸出它所創(chuàng)建的bundle,以及如何命名這些文件钧大，主要輸出文件的默認(rèn)值是‘./dist/main.js’。
mode:提供 mode 配置選項(xiàng)激才，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化,development(開發(fā)環(huán)境),production(生產(chǎn)環(huán)境),none(不使用任何默認(rèn)優(yōu)化選項(xiàng))拓型。
loader：這是 webpack 開箱可用的自帶能力额嘿，loader 用于轉(zhuǎn)換某些類型的模塊（編譯兼容）瘸恼。
plugin：打包優(yōu)化，資源管理册养，注入環(huán)境變量等（能力擴(kuò)展）东帅。
3.webpack的作用？
模塊打包球拦，編譯兼容靠闭，能力擴(kuò)展
模塊打包】擦叮可以將不同模塊的文件打包整合在一起愧膀，并且保證它們之間的引用正確，執(zhí)行有序谣光。利用打包我們就可以在開發(fā)的時(shí)候根據(jù)我們自己的業(yè)務(wù)自由劃分文件模塊檩淋，保證項(xiàng)目結(jié)構(gòu)的清晰和可讀性。
編譯兼容萄金。通過webpack的Loader機(jī)制蟀悦，不僅僅可以幫助我們對代碼做polyfill，還可以編譯轉(zhuǎn)換諸如.less, .vue, .jsx這類在瀏覽器無法識別的格式文件氧敢，讓我們在開發(fā)的時(shí)候可以使用新特性和新語法做開發(fā)日戈，提高開發(fā)效率。
能力擴(kuò)展孙乖。通過webpack的Plugin機(jī)制浙炼，我們在實(shí)現(xiàn)模塊化打包和編譯兼容的基礎(chǔ)上份氧，可以進(jìn)一步實(shí)現(xiàn)諸如按需加載，代碼壓縮等一系列功能弯屈，幫助我們進(jìn)一步提高自動(dòng)化程度半火，工程效率以及打包輸出的質(zhì)量。
4.模塊打包的運(yùn)行原理季俩？
1钮糖、讀取webpack的配置參數(shù)；
2酌住、啟動(dòng)webpack店归，創(chuàng)建Compiler對象并開始解析項(xiàng)目；
3酪我、從入口文件（entry）開始解析消痛，并且找到其導(dǎo)入的依賴模塊，遞歸遍歷分析都哭，形成依賴關(guān)系樹秩伞；
4、對不同文件類型的依賴模塊文件使用對應(yīng)的Loader進(jìn)行編譯欺矫，最終轉(zhuǎn)為Javascript文件纱新；
5、整個(gè)過程中webpack會(huì)通過發(fā)布訂閱模式穆趴，向外拋出一些hooks脸爱，而webpack的插件即可通過監(jiān)聽這些關(guān)鍵的事件節(jié)點(diǎn)，執(zhí)行插件任務(wù)進(jìn)而達(dá)到干預(yù)輸出結(jié)果的目的未妹。
5.sourceMap的原理簿废？
提到sourceMap，很多小伙伴可能會(huì)立刻想到Webpack配置里邊的devtool參數(shù)络它，以及對應(yīng)的eval族檬，eval-cheap-source-map等等可選值以及它們的含義。除了知道不同參數(shù)之間的區(qū)別以及性能上的差異外化戳，我們也可以一起了解一下sourceMap的實(shí)現(xiàn)方式单料。
sourceMap是一項(xiàng)將編譯、打包迂烁、壓縮后的代碼映射回源代碼的技術(shù)看尼，由于打包壓縮后的代碼并沒有閱讀性可言，一旦在開發(fā)中報(bào)錯(cuò)或者遇到問題盟步，直接在混淆代碼中debug問題會(huì)帶來非常糟糕的體驗(yàn)藏斩，sourceMap可以幫助我們快速定位到源代碼的位置，提高我們的開發(fā)效率却盘。sourceMap其實(shí)并不是Webpack特有的功能狰域，而是Webpack支持sourceMap媳拴，像JQuery也支持souceMap。
6.有哪些常用的loader?
raw-loader：加載文件原始內(nèi)容（utf-8）
file-loader：把文件輸出到一個(gè)文件夾中兆览，在代碼中通過相對 URL 去引用輸出的文件 (處理圖片和字體)
url-loader：與 file-loader 類似屈溉，區(qū)別是用戶可以設(shè)置一個(gè)閾值，大于閾值會(huì)交給 file-loader 處理抬探，小于閾值時(shí)返回文件 base64 形式編碼 (處理圖片和字體)
source-map-loader：加載額外的 Source Map 文件子巾，以方便斷點(diǎn)調(diào)試
svg-inline-loader：將壓縮后的 SVG 內(nèi)容注入代碼中
image-loader：加載并且壓縮圖片文件
json-loader 加載 JSON 文件（默認(rèn)包含）
handlebars-loader: 將 Handlebars 模版編譯成函數(shù)并返回
babel-loader：把 ES6 轉(zhuǎn)換成 ES5
ts-loader: 將 TypeScript 轉(zhuǎn)換成 JavaScript
awesome-typescript-loader：將 TypeScript 轉(zhuǎn)換成 JavaScript，性能優(yōu)于 ts-loader
sass-loader：將SCSS/SASS代碼轉(zhuǎn)換成CSS
css-loader：加載 CSS小压，支持模塊化线梗、壓縮、文件導(dǎo)入等特性
style-loader：把 CSS 代碼注入到 JavaScript 中怠益，通過 DOM 操作去加載 CSS
postcss-loader：擴(kuò)展 CSS 語法仪搔，使用下一代 CSS，可以配合 autoprefixer 插件自動(dòng)補(bǔ)齊 CSS3 前綴
eslint-loader：通過 ESLint 檢查 JavaScript 代碼
tslint-loader：通過 TSLint檢查 TypeScript 代碼
mocha-loader：加載 Mocha 測試用例的代碼
coverjs-loader：計(jì)算測試的覆蓋率
vue-loader：加載 Vue.js 單文件組件
i18n-loader: 國際化
cache-loader: 可以在一些性能開銷較大的 Loader 之前添加蜻牢，目的是將結(jié)果緩存到磁盤里.
7.有哪些常見的plugin烤咧？
define-plugin：定義環(huán)境變量 (Webpack4 之后指定 mode 會(huì)自動(dòng)配置)
ignore-plugin：忽略部分文件
html-webpack-plugin：簡化 HTML 文件創(chuàng)建 (依賴于 html-loader)
web-webpack-plugin：可方便地為單頁應(yīng)用輸出 HTML，比 html-webpack-plugin 好用
terser-webpack-plugin: 支持壓縮 ES6
webpack-parallel-uglify-plugin: 多進(jìn)程執(zhí)行代碼壓縮抢呆，提升構(gòu)建速度
mini-css-extract-plugin: 分離樣式文件煮嫌，CSS 提取為獨(dú)立文件，支持按需加載 (替代extract-text-webpack-plugin)
serviceworker-webpack-plugin：為網(wǎng)頁應(yīng)用增加離線緩存功能
clean-webpack-plugin: 目錄清理
ModuleConcatenationPlugin: 開啟 Scope Hoisting
speed-measure-webpack-plugin: 可以看到每個(gè) Loader 和 Plugin 執(zhí)行耗時(shí)
webpack-bundle-analyzer: 可視化 Webpack 輸出文件的體積 (業(yè)務(wù)組件镀娶、依賴第三方模塊)
