• webpack簡介
  • 簡介
  • 使用前提
  • 安裝
  • 使用
  • 配置檔案
  • 指定配置檔案
  • webpack的依賴圖
• webpack loader

webpack簡介

簡介

webpack is a static module bundler for modern JavaScript applications.

webpack是一個靜態的模組化打包工具，為現代的JavaScript應用程式。

• 打包bundler：webpack可以將幫助我們打包的工具。
• 靜態的static：將程式碼打包成最終的靜態資源（css、js、html等部署到靜態伺服器）。
• 模組化module：支援模組化開發（ES module、CommonJS、AMD、CMD等）。
• 現代的modern：現代前端開發的複雜性催生了webpack的出現和發展。

在Vue專案webpack處理的檔案有：JavaScript的打包、Css的處理、資原始檔img等、HTMl資源的處理、處理vue專案的SFC檔案.vue檔案等。

使用前提

1. webpack中文文件
2. webpack的執行環境是基於Node環境的，電腦上必須安裝Node.js。

安裝

webpack的安裝分為兩個：webacpk、webpack-cli
兩者的關係：

1. 執行webpack命令，會執行node_modules下的.bin目錄下的webpack；
2. webpack在執行時是依賴webpack-cli的，如果沒有安裝就會報錯；
3. 而webpack-cli中程式碼執行時，才是真正利用webpack進行編譯和打包的過程；
4. 所以我們需要將兩個都進行安裝。
   
   安裝程式碼：
   初始化檔案目錄：
   npm init -y
   全域性安裝（不推薦）：
   npm install webpack webpack-cli -g
   區域性安裝（推薦）：
   npm install webpack webpack-cli -D

使用

在本地安裝後文件測試目錄如下：

使用區域性的webpack：npx webpack，預設入口 src/index.js
打包後的會生成dist檔案，裡面就是打包後的index.js檔案，webpack會根據入口檔案中的依賴關係來打包。

為了方便打包，我們可以在package,json中建立script指令碼，執行指令碼npm run build

配置檔案

webpack需要打包的專案是非常複雜的，並且我們需要一系列的配置來滿足要求。
因此在根目錄下建立一個webpack.config.js檔案，來作為webpack的配置檔案。

以後所有的webpack配置資訊都寫在這個目錄下面。

指定配置檔案

如果將配置檔案webpack.config.js的名字修改為vue.config.js;
通過 --config 來指定對應的配置檔案;
webpack --config vue.config.js
或者直接在package.json中增加新的指令碼就可以使用

之後執行 npm run build就行。
（ps：個人猜測vue專案中的vue.config.js檔案就是通過這個實現）

webpack的依賴圖

webpack在處理應用程式時，會根據命令或配置檔案找到入口檔案（main.js）；
從入口開始，生成一個依賴關係圖，這個依賴關係圖會包含應用程式中所需的所有模組（比如.js檔案、.css檔案、圖片、字型等）；
然後遍歷這個圖結構，打包一個個模組，根據檔案（字尾名）的不同使用不同的loader來解析。

webpack loader