webpack 簡介

本教程咱們來學一下 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 。