本教程我們來學一下 webpack 的基礎入門知識，webpack 作爲一個 JavaScript 應用程序的靜態模塊打包器，可以將各種靜態資源作爲模塊來處理，是當下前端工程化的一個很受歡迎的工具，我們將在 webpack4.0 的基礎上來學習 webpack 的使用。
什麼是webpack
webpack 是一個開源的前端打包工具，webpack 提供了前端開發缺乏的模塊化開發方式，將各種靜態資源視爲模塊，並從它生成優化過的代碼，例如靜態資源可以包括 js、css、html、less、圖片等等。
webpack 可以從終端或者是通過更改 webpack.config.js 文件來設置各項功能。我們要使用 webpack，有一個前提條件就是必需先安裝 Node.js， 在安裝 webpack 或者其他的插件等都需要用到 npm 命令。
webpack 其中一個特性是使用加載器來將資源轉化成模塊，開發者可以自定義加載器的順序、格式來適應項目的需求。
爲什麼使用webpack
我們在開發的時候，經常會遇到在一個 HTML 頁面中引入多個 CSS 和 JS 文件，或者是一些 JS 資源彼此之間存在依賴關係，或者是需要使用一大堆安裝包的情況，這些問題可能容易導致頁面加載緩慢。所以爲了解決這個問題，我們可以使用 webpack 來打包這些文件，將各種靜態資源都打包成了一個文件，這樣瀏覽器加載起來就快很多。
在 webpack 中，任何靜態資源都可以視爲模塊，模塊之間也可以相互依賴，通過 webpack 對模塊進行處理後，可以打包成我們想要的靜態資源。
webpack四個核心概念
webpack 中有四個核心概念，包括入口(entry)、輸出(output)、loader、插件(plugins)。如下所示：
- entry：用於指定 webpack 應該使用哪個模塊來作爲構建的開始，可以指定一個或多個起點，默認值爲 ./src。
- output：指定 webpack 最終輸出的文件輸出位置和文件名等信息，默認輸出位置爲 ./dist。
- loader：可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後我們就可以利用 webpack 的打包能力，對它們進行處理。
- plugins：目的在於解決 loader 無法實現的其他事。可以讓 webpack 能夠執行更多任務，從優化和壓縮，到重新定義環境中的變量，功能非常強大。
webpack優勢
- webpack 是以 commonJS 的形式來書寫腳本的，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
- 可以通過配置，打包成多個文件，有效利用瀏覽器的緩存功能提升性能。
- 將樣式文件和圖片等靜態資源也可視爲模塊進行打包。配合 loader 加載器，可以支持 Sass，Less 等 CSS 預處理器。
- 專注於處理模塊化的項目，能做到開箱即用、 一步到位。
- 擴展性強，插件 plugins 機制完善。
總結
webpack 是一個模塊打包工具，或者也可以叫做模塊化打包機。通過 webpack 可以幫助我們將不同的資源和文件，進行打包，也就是合併在一個文件裏面。除此之外，webpack 還可以進行 CSS 預處理，將 ES6 轉爲 ES5 等作用。下一節我們將會學習如何安裝 webpack 。