這是我參與更文挑戰的第26天，活動詳情檢視： 更文挑戰
Webpack是什麼？
Webpack是一種前端資源建構工具，一個靜态子產品打包器，在Webpack看來，前端的所有資源檔案都會作為子產品處理。它将根據子產品的依賴關系進行靜态分析，打包生成對應的靜态資源(bundle).
舉例
引出建構工具
- 在上面的例子中，很多檔案中的文法浏覽器并不能識别，需要将這些檔案中的文法轉換為浏覽器能夠識别的文法。是以建構工具應運而生了，通過建構工具可以将各種文法轉換的工具進行彙總，我們隻需關注這個建構工具如何使用即可，而不用分别去學習如何将less轉為css,如何将js中的文法轉換為ES5等。本次要學習的Webpack就是建構工具的一種。
打包是什麼意思？
- 在Webpack工作的時候，我們首先要告訴Webpack一個打包的起點，即入口檔案。
- webpack将檔案中的每一個依賴記錄好，然後形成一個依賴關系樹狀圖。
- 根據依賴關系樹，依次将資源引入。
- 資源引入後形成一個代碼塊（chunk）。
- 對chunk中的代碼進行分别處理，比如将less編譯成css,将js文法編譯為浏覽器能夠識别的js文法。
上面介紹的五個步驟，統一概括起來就是打包！
打包好之後開始進行輸出
- 輸出後叫bundle.
Webpack的五個核心概念
1. Entry
- 入口Entry訓示Webpack以哪個檔案為入口起點開始打包，分析建構内部依賴圖。
2. Output
- 輸出（Output）訓示Webpack打包後的資源bundles輸出到哪裡去，以及如何命名。
3. Loader
- Loader讓Webpack能夠去處理那些非JS檔案，Webpack自身隻了解JS。（Loader就像是翻譯官）
4. Plugins
- 插件（Plugins）可以用于執行範圍更廣的任務，插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量等。
5. Mode
- 模式（Mode）訓示Webpack使用相應模式的配置