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

2021 年 9 月 29 日
筆記
VUE, 前端知識分享

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

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 官網：//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。

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

Tags: VUE 前端知識分享