1.webpack是什么？
webpack一個用于現代javascript應用程序的靜態模塊打包工具
2.webpack的配置有哪些？
入口（entry）,出口（output）,mode,plugin,loader；
入口：指示webpack使用哪個模塊作為構建其內部依賴圖的開始。默認值是：‘./src/index.js’。
出口：告訴webpack在哪里輸出它所創建的bundle,以及如何命名這些文件，主要輸出文件的默認值是‘./dist/main.js’。
mode:提供 mode 配置選項，告知 webpack 使用相應模式的內置優化,development(開發環境),production(生產環境),none(不使用任何默認優化選項)。
loader：這是 webpack 開箱可用的自帶能力，loader 用于轉換某些類型的模塊（編譯兼容）。
plugin：打包優化，資源管理，注入環境變量等（能力擴展）。
3.webpack的作用？
模塊打包，編譯兼容，能力擴展
模塊打包。可以將不同模塊的文件打包整合在一起，并且保證它們之間的引用正確，執行有序。利用打包我們就可以在開發的時候根據我們自己的業務自由劃分文件模塊，保證項目結構的清晰和可讀性。
編譯兼容。通過webpack的Loader機制，不僅僅可以幫助我們對代碼做polyfill，還可以編譯轉換諸如.less, .vue, .jsx這類在瀏覽器無法識別的格式文件，讓我們在開發的時候可以使用新特性和新語法做開發，提高開發效率。
能力擴展。通過webpack的Plugin機制，我們在實現模塊化打包和編譯兼容的基礎上，可以進一步實現諸如按需加載，代碼壓縮等一系列功能，幫助我們進一步提高自動化程度，工程效率以及打包輸出的質量。
4.模塊打包的運行原理？
1、讀取webpack的配置參數；
2、啟動webpack，創建Compiler對象并開始解析項目；
3、從入口文件（entry）開始解析，并且找到其導入的依賴模塊，遞歸遍歷分析，形成依賴關系樹；
4、對不同文件類型的依賴模塊文件使用對應的Loader進行編譯，最終轉為Javascript文件；
5、整個過程中webpack會通過發布訂閱模式，向外拋出一些hooks，而webpack的插件即可通過監聽這些關鍵的事件節點，執行插件任務進而達到干預輸出結果的目的。
5.sourceMap的原理？
提到sourceMap，很多小伙伴可能會立刻想到Webpack配置里邊的devtool參數，以及對應的eval，eval-cheap-source-map等等可選值以及它們的含義。除了知道不同參數之間的區別以及性能上的差異外，我們也可以一起了解一下sourceMap的實現方式。
sourceMap是一項將編譯、打包、壓縮后的代碼映射回源代碼的技術，由于打包壓縮后的代碼并沒有閱讀性可言，一旦在開發中報錯或者遇到問題，直接在混淆代碼中debug問題會帶來非常糟糕的體驗，sourceMap可以幫助我們快速定位到源代碼的位置，提高我們的開發效率。sourceMap其實并不是Webpack特有的功能，而是Webpack支持sourceMap，像JQuery也支持souceMap。
6.有哪些常用的loader?
raw-loader：加載文件原始內容（utf-8）
file-loader：把文件輸出到一個文件夾中，在代碼中通過相對 URL 去引用輸出的文件 (處理圖片和字體)
url-loader：與 file-loader 類似，區別是用戶可以設置一個閾值，大于閾值會交給 file-loader 處理，小于閾值時返回文件 base64 形式編碼 (處理圖片和字體)
source-map-loader：加載額外的 Source Map 文件，以方便斷點調試
svg-inline-loader：將壓縮后的 SVG 內容注入代碼中
image-loader：加載并且壓縮圖片文件
json-loader 加載 JSON 文件（默認包含）
handlebars-loader: 將 Handlebars 模版編譯成函數并返回
babel-loader：把 ES6 轉換成 ES5
ts-loader: 將 TypeScript 轉換成 JavaScript
awesome-typescript-loader：將 TypeScript 轉換成 JavaScript，性能優于 ts-loader
sass-loader：將SCSS/SASS代碼轉換成CSS
css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性
style-loader：把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS
postcss-loader：擴展 CSS 語法，使用下一代 CSS，可以配合 autoprefixer 插件自動補齊 CSS3 前綴
eslint-loader：通過 ESLint 檢查 JavaScript 代碼
tslint-loader：通過 TSLint檢查 TypeScript 代碼
mocha-loader：加載 Mocha 測試用例的代碼
coverjs-loader：計算測試的覆蓋率
vue-loader：加載 Vue.js 單文件組件
i18n-loader: 國際化
cache-loader: 可以在一些性能開銷較大的 Loader 之前添加，目的是將結果緩存到磁盤里.
7.有哪些常見的plugin？
define-plugin：定義環境變量 (Webpack4 之后指定 mode 會自動配置)
ignore-plugin：忽略部分文件
html-webpack-plugin：簡化 HTML 文件創建 (依賴于 html-loader)
web-webpack-plugin：可方便地為單頁應用輸出 HTML，比 html-webpack-plugin 好用
terser-webpack-plugin: 支持壓縮 ES6
webpack-parallel-uglify-plugin: 多進程執行代碼壓縮，提升構建速度
mini-css-extract-plugin: 分離樣式文件，CSS 提取為獨立文件，支持按需加載 (替代extract-text-webpack-plugin)
serviceworker-webpack-plugin：為網頁應用增加離線緩存功能
clean-webpack-plugin: 目錄清理
ModuleConcatenationPlugin: 開啟 Scope Hoisting
speed-measure-webpack-plugin: 可以看到每個 Loader 和 Plugin 執行耗時
webpack-bundle-analyzer: 可視化 Webpack 輸出文件的體積 (業務組件、依賴第三方模塊)
