使用 Vue 腳手架，為什麼要學 webpack？

先問大家一個很簡單的問題：

vue init webpack prjectName 與 vue create projectName 有什麼區別呢？

它們是 Vue-cli 2 和 Vue-cli3 建立專案的兩個命令，之所以兩個命令不同，根本原因是 Vue-cli2 是基於webpack 3，而 vue-cli3 是基於 webpack 4 的。

所以我們先介紹 webpack 是如何管理專案的，如何把專案中 js、css、html等是如何壓縮轉換檔案？然後學習 vue-cli 2、vue-cli 3 分別如何建立專案，以及專案結構介紹。

一、全面瞭解 webpack

1.1、什麼是Webpack？

webpack 就是前端模組化打包工具。講人話就是，webpack 的理念就是一切皆模組化，把一堆堆的 js、css等檔案放在一個總的入口檔案引入，剩下 webpack 會把引入的檔案根據對應的關係合併成一個 bundle.js 。打包後的 index.html 引入 bundle就可以了。除了 css、js還有圖片、字型、html模板都可以模組化打包。

如下圖：

1.2、為什麼要將所有資源放在一個檔案內？

我們都知道，網頁渲染的時候，載入的東西越少，響應的也就更快，網頁的載入速度就能快好多，有時為了優化效能，我們會把資源都合併到一個檔案內，導致這個檔案會很大，往往會出現兩個問題：

當專案龐大的時候，不同頁面不能做到按需載入，而且將所有的資源一併載入，耗費時間過長，效能反而降低
導致依賴庫之間關係混亂，當專案越來越大時，會變得難以維護。

但是對於 webpack，可以很好地解決上述兩個問題，webpack 有同步和非同步兩種載入方式，正確配置後，可以進行按需載入。所以 webpack 是一個十分聰明很有優秀的打包工具。

1.3、為什麼使用webpack ?

對模組化規範 CommonJS 、AMD、CMD支援性友好。
形成專案依賴樹，每個依賴都可拆分成一個模組，進行按需載入。
有強大的外掛系統，可以實現程式碼壓縮、分包、模組熱替換等，自定義模組等自動化工作。
開發配置快速高效。是前端目前最主流的模組化打包工具。

二、開始你的第一個 webpack 專案

webpack 是一個基於 node 的專案，所以使用之前我們需要安裝 node.js。

node.js 官網：https://nodejs.org/zh-cn/

下載之後進行安裝，安裝完成之後：

使用 node -v檢查 node 的版本：如：v12.18.2

使用 npm -v 檢查 npm的版本

2.1、安裝webpack

安裝可分：為全域性安裝和當前專案安裝。

全域性安裝：npm install webpack -g

在c盤下會生成 node_modules 資料夾中會包含 webpack，此時此刻我們可以使用 webpack命令了；

專案內安裝：npm install webpack --save 或者npm install webpack --save-dev

npm install webpack --save 與 npm install webpack --save-dev 區別在於是否將依賴存入 dependencies 以及 devdependencies。

2.2、生成 package.json

建立一個webpack專案資料夾，進入專案檔案內根目錄下，執行命令：npm init

如圖：根據問題提示，輸入對應資訊後，會在根目錄下生成 package.json 檔案。

2.3、新建專案內容

dist -- distribution（釋出）

建立 dist 資料夾，用於儲存打包之後的檔案。

建立 src 資料夾，資料夾內新建 index.js 作為入口；建立index.html檔案，並建立main.js檔案並引入html。

2.4、配置 webpack

webpack.config.js 程式碼如下：

module.exports={

 entry:'./src/main.js',

 output:{

  path:'./dist',

  filename:'bundle.js'

 }

}

entry(入口)：配置入口檔案

output(輸出)：設定打包後文件存放路徑(path) 和檔名(filename)。

執行命令：webpack --config webpack.config.js，進行打包。

命令報錯：

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "./dist" is not an absolute path!
-> The output directory as **absolute path** (required).

提示路徑需要設定絕對路徑。

2.5、打包檔案

此時需要引入 node 的 path 模組。並修改 path 配置，把路徑設定為當前專案根目錄下。

修改 package.config.js 檔案程式碼如下：

const path = require('path')

module.exports={

 entry:'./src/main.js',

 output:{

  path:path.resolve(__dirname,'dist'),

 filename:'bundle.js'

 }

}

重新執行命令：webpack --config webpack.config.js，進行打包。此時就會在dist資料夾內出現了一個被打包後的 bundle.js。

三、webpack 用來做什麼？

以上內容講述的打包，只是打包了js內容，具體的index.html並沒有被打包到dist檔案內。那是什麼原因呢？

webpack 用來處理我們寫的 js 程式碼，webpack會自動處理 js 之間相關依賴。但是開發中不僅僅只有基本的 js 程式碼處理，也需要載入 css、圖片、也包括一些高階的ES6轉ES5、TypeScript 轉 ES5、將 scss、less 轉 css、將 jsx.vue 檔案轉js檔案等。

webpack 本不支援上述這些轉化，此時需要對 webpack 進行擴充。下篇文章介紹webpack的 loaders 和 plugin。

點贊關注不迷路，感謝支援！

使用 Vue 腳手架，為什麼要學 webpack？