webpack 學習筆記（二）：webpack 簡介

經過前面對 webpack 快速入門代碼練習的學習，咱們對 webpack 應該有了一個初步的印象。這篇文章，咱們會更多的站在理論的角度來進一步學習：webpack 是什麼？

咱們常常會在各類文章中看到關於 webpack 的介紹：

webpack 是一個前端資源構建工具，是一個靜態模塊打包器。

可是看完以後咱們一般仍是一臉懵逼，官方的描述對於不少 webpack 的初學者來講太過於專業，致使你們並不能真正的瞭解到 webpack 究竟是幹什麼的。

因此在這篇文章，我儘可能用最簡單的例子和描述，來給他們解釋清楚，webpack 究竟是什麼。

前端資源

咱們一直說 webpack 是一個前端資源構建工具，這裏提到的「前端資源」，指的並非什麼前端資料、文檔、博客等，而是在前端項目開發中所須要的 HTML、CSS、JS、圖片等資源。前端資源構建，也是針對這些代碼資源進行構建。

構建工具

那構建又是什麼意思呢？咱們代碼寫好以後，爲何還須要構建呢？
咱們來看一下下面這段代碼：

header {
    background-color: #cccccc;
    h1 {
        color: #3c3c3c;
    }
}

這是一段用 less 語法寫的樣式代碼，咱們在 .html 文件中引入並在瀏覽器中運行該代碼：

運行後會發現 less 寫的樣式並無生效，這是由於瀏覽器不能解析 less 的語法。

一樣的道理，咱們在webpack 學習筆記：快速入門一章中練習的代碼，也是由於瀏覽器不能解析 ES6 的模塊化語法致使瀏覽器報錯。

因此，當咱們在一個項目中，使用了這些瀏覽器不能識別的語法去寫代碼時，咱們就須要藉助一些工具來幫咱們把代碼轉換成瀏覽器可以識別的語法。

例如：能將 less 轉換爲 css 的工具，將 ES6 轉換爲 ES5 的工具。若是還有其餘語法的代碼，可能還須要更多的工具。

這個時候，前端就提出了一個「構建工具」的概念，意思就是咱們找一個大的工具，將這些小工具的功能都包含進來，開發者只須要學習這個大工具的使用就能夠了。

而這個大工具，就是「構建工具」，webpack，就是構建工具的一種。

靜態模塊打包器

前面咱們弄清楚了 webpack 是一個前端資源構建工具，那什麼又是靜態模塊打包器呢？

所謂的靜態模塊打包器，就是 webpack 會將前端項目中的全部資源文件都看成模塊處理，根據模塊的依賴關係進行打包編譯，最後生成一個可以在瀏覽器中正常運行的出口文件。

官網的圖其實就是一個很好的解釋。

咱們再經過一個代碼例子來幫助理解，有用過 Vue、React 等前端框架的同窗可能會常常看到相似於下面這種的代碼（沒用過也不影響理解）：

// index.js
// 引入 js 資源
import $ from 'jquery';
import './a.js';
// 引入樣式資源
import './b.css';
import './c.less';
// 引入圖片、字體等資源
// ...

上面的代碼中，咱們在一個 index.js 文件中經過 import 引入了 .js、.css、.less 等多個文件。

咱們將這個 index.js 文件做爲項目的入口文件。webpack 會以入口文件爲起點，將該文件中全部依賴的文件引入進來，造成一個代碼塊，咱們稱之爲 chunk。在 chunk 裏面，webpack 會對不一樣類型的代碼分別進行編譯處理，將代碼都轉換爲瀏覽器可以解析的語法，最後將編譯完成的代碼輸出。

這個例子中全部的代碼文件，都是「靜態模塊」，而 webpack 編譯這些模塊的過程就是「打包」，最後編譯完成輸出的新文件咱們稱之爲「出口文件」。

最後，咱們再回過頭來看看文章開頭關於 webpack 的描述：webpack 是一個前端資源構建工具，是一個靜態模塊打包器。

會不會以爲對這句話有了一些本身的理解了呢？