隨著前端專案複雜度的增加，其所依賴的資源也越來越多，從最初的HTML檔案，CSS檔案，JS檔案發展到現在的各種預處理檔案，模板檔案等等。檔案多了，專案大了，專案的維護就變得更加困難了，使用者載入頁面的速度也變得更慢了。在這樣的背景下，webpack 應運而生，webpack 的主要作用是資源的整合，打包，壓縮。使用 webpack，它會自動構建一個專案資源之間的依賴關係圖，其中包含專案需要的所有模組，然後把這些資源全部整合打包成一個或多個（根據需要）bundle（包）。

一　　準備工作

　　1，安裝 nodejs

　　在使用 webpack 之前，我們需要做一些準備工作。由於 webpack 工具是基於 nodejs 開發的，所以我們應該首先在電腦上安裝它。

　　nodejs 下載地址：https://nodejs.org/en/；根據自己的作業系統下載安裝即可。

　　裝好後它會在你的電腦上建立一個系統命令：node。使用如下命令可以常看當前安裝的 node 版本號，如果能正常檢視，那麼你的 nodejs 就已經安裝成功了。

1 node -v

　　2，npm 

　　通常情況下，安裝 nodejs 會自動安裝 npm 工具。npm 工具可以理解成一個平臺，安裝好後它會在你的電腦上建立一個系統命令：npm。這個工具的主要作用是：在命令列模式下，使用該命令從NPM伺服器下載一些包（各種框架等）。

　　同樣的，使用命令 npm -v 也可以檢視當前安裝的 npm 工具版本號。如果查到了，那麼證明這個工具也安裝成功了。

　　npm有下面一些常用的命令（在專案目錄下使用）：　　

1 npm init

　　初始化專案，執行該命令後會有很多配置項，可以根據需要填寫，也可以在命令後面新增 -y 引數，使用預設配置。初始化完成後，專案目錄下會多一個 package.json 檔案，這個檔案記錄了該專案的所有配置資訊，如果你不想使用預設的配置了，那麼你隨時可以到這裡來修改相關項。　

1 npm install

　　根據 package.json 配置檔案，自動配置專案，並載入專案依賴的包。　　

1 npm install 'bundle'

　　安裝(下載)你需要的包。比如你需要使用jQuery，你可以使用如下命令：npm install jquery。預設該命令會安裝最新版的包，你也可以通過 @ 符號指定版本，比如：npm install [email protected]。包安裝完成後，專案目錄下又會多一個node_modules 的目錄，這個目錄中存放的就是你安裝的所有包。　　

1 npm uninstall ‘bundle’

　　移除已安裝的包。

1 npm list

　　檢視專案安裝了哪些包。

1 npm info ‘bundle’

　　檢視包的詳情。

　　使用npm命令安裝包時，有以下一些可選引數：

　　　　-S 或 --save：包作用於生產環境。

　　　　-D 或 --save-dev：包作用於生產環境和開發環境（常用）。

　　　　-g 或 --global：全域性安裝。

　　如果不帶引數 -g 則預設本地安裝，即安裝在當前專案下。如果使用了全域性安裝。你可以使用npm root -g 檢視全域性安裝的目錄位置。

　　小技巧：npm預設下載伺服器是國外的，有時候速度難免有點慢，這時你可以使用淘寶在國內的映象平臺，有兩種方式實現：第一種，安裝cpmn，npm install cnpm -g。第二種，修改預設下載路徑，npm config set registry https://registry.npm.taobao.org。

　　3，自定義命令

　　package.json 檔案中有一個 scripts 選項，該選項用於自定義 npm 命令，比如稍後我們要講到的 webpack 命令：

1 "scripts":{
2     "bundle":'webpack'
3 }
4 //現在你可以使用 bundle 命令來替代 webpack 了

　　自定義命令的使用方式和原始命令有所區別：

1 npm run bundle
2 #通過 npm run 來啟動自定義命令

二　　webpack

　　1，安裝

　　知道了怎麼通過 npm 安裝包，那麼接下來我們就要學習如何安裝 webpack 了，其實也很簡單，直接使用命令：

1 npm install webpack -g

　　通常 webpack 使用全域性安裝，即使用引數 -g 。安裝成功後可以通過如下命令檢視當前安裝的 webpack 版本號：

1 webpack -v

　　但有時候我們還是希望為某專案單獨使用特定版本的 webpack 工具，這時你可以選擇本地安裝，即不指定引數 -g，它會被安裝到 node_modules 目錄下 。但本地安裝會有一個問題：webpack 命令不能正常使用了。幸好，nodejs 為我們提供了 npx 命令，以在不修改全域性目錄的情況下使用 webpack 命令。

1 npx webpack -v

　　2，簡單使用

　　webpack 工具安裝成功後，你就可以使用 webpack 命令對專案檔案進行打包處理了，命令使用方式也很簡單：

1 webpack ‘url被打包檔案’

 　　檔案打包成功後預設會在專案中新建一個目錄 dist，裡面會有一個和被打包檔案同名的檔案，這就是打包之後生成的了。

　　3，配置檔案

　　如果希望使用更多 webpack 提供的功能，你需要使用配置檔案 webpack.config.js。該檔案向外暴露一個物件，供 nodejs 使用，nodejs 根據這個配置物件來決定如何打包檔案。

　　配置檔案有四個核心，他們分別是：入口（entry）、輸出（output）、載入器（loader）、外掛（plugins）。檔案的基本結構如下：

1 module.exports = { //node 語法，向外暴露一個物件
2     entry: '',
3     output:{},
4     module:{
5         rules:[]
6     },
7     plugins:[]
8 };

 　　entry 規定 webpack 從哪裡開始打包，並構建內部依賴關係圖。它的值是一個相對路徑，一般指向一個具體的檔案。比如當前專案目錄下的 main.js：

1 entry: './main.js'

　　output 則是規定 webpack 輸出內容的配置物件，通常它需要兩個屬性：filename（輸出檔案的名稱）和 path（輸出路徑）：

1 const path = require('path');//node 的一個 path 模組
2 module.exports = {
3      output:{
4         filename:'main.bundle.js',
5         path:path.resolve('__dirname','dist')
6         //通過 path 模組的 resolve 方法，在專案根目錄下生成一個 dist 目錄，這也是 node 的語法，有興趣的可以去學習 node，這裡只是介紹 webpack，所以不深究
7     }
8 }

 　　module 用於指定 loader。由於 webpack 只認識 JS 檔案，當碰到專案中需要打包其他檔案，比如 CSS 檔案，圖片，txt 檔案或者其他程式語言檔案等等，這時候就需要用到 loader了。loader 用於對模組的原始碼進行轉換，以便瀏覽器最終能夠認識他們。

1 module: {
2     rules: [
3         { test: /\.css$/, use: 'css-loader' },
4         { test: /\.ts$/, use: 'ts-loader' }
5     ]
6 }
7 //每條規則通過 test 來判斷打包的是什麼型別的檔案，如果匹配成功，將使用本規則 use 所指定的 loader。

　　事實上，每條規則可以使用多個 loader，這時 use 需要用陣列來儲存它們。每個 loader 都有不容的作用，也有一些不盡相同的可選項，如果需要，請檢視 webpack 官方文件  LOADER。

　　plugins 用於配置 webpack 外掛，這些外掛可以在打包的不同階段完成一些功能。比如 HtmlWebpackPlugin 外掛，它的作用是在打包完成後，在輸出目錄自動生成一個 HTML 檔案，並把打包好的檔案引入該 HTML 檔案中，下面是它的用法：

1 var HtmlWebpackPlugin = require('html-webpack-plugin');
2 var webpackConfig = {
3   plugins: [new HtmlWebpackPlugin({
4     filename:'index.html',
5     template:'src/test.html' 
6   })]
7 };

　　先在配置檔案中引入外掛，然後在 plugins 中建立外掛例項，建立例項的時候可以給一個配置物件，指定生成的檔名稱，和使用什麼樣的 HTML 模板等。

　　注意：loader 和 plugin 都需要使用 npm 先安裝到本地才能如上述方式使用。

　　4，常用 loader 介紹

　　在一般專案中，最常用的 loader 包括 url-loader 和 （style-loader & css-loader）。前者用於圖片打包，後者用於樣式打包。

　　url-lorder 用法如下：

 1 module:{
 2     rules:[
 3         test:/\.(jpg|png|gif)$/, //正則用於匹配圖片資源
 4         use:{
 5             loader:'url-loader',
 6             options:{
 7                 name:'[name].[ext]', //佔位符用於指定圖片的名稱和字尾名
 8                 limit:2048, //規定圖片大於2048位元組則打包到指定目錄（下面的outputPath），否則以Base64編碼形式直接打包到輸出 js 檔案中
 9                 outputPath:'images/' //單獨指定圖片檔案指定輸出路徑
10             }
11         }
12     ]
13 }

　　樣式 loader 用法：

 1 module:{
 2     rules:{
 3         test:/\.scss$/,
 4         use:[
 5             'style-loader', // 通過<style>標籤向HTML文件注入css樣式
 6             'css-loader', // 解析合併css樣式檔案
 7             'sass-loader' // 解析scss樣式檔案，如果是其他型別的則需要安裝其他loader
 8         ]
 9     }
10 }

 　　需要注意的是：使用多個 loader 解析時，webpack 呼叫順序是從後到前。比如上例中的樣式 loader，先使用 sass-loader 把 .scss 檔案解析成標準 css 樣式，再呼叫 css-loader 檢查是否有多個 css檔案，如果有，則將他們合併成一個，最後呼叫 style-loader 把這些程式碼通過 <style> 標籤注入到 HTML 文件中。

　　如果你不想用內聯方式引入 CSS 樣式，那麼你可以使用 <link> 標籤的方式：

1 import url from 'file.css'

 1 module: {
 2     rules: [
 3       {
 4         test: /\.css$/,
 5         use: [
 6           { loader: "style-loader/url" },
 7           { loader: "file-loader" }
 8         ]
 9       }
10     ]
11   }

　　這種方式最終將會在頁面中通過標籤 <link rel="stylesheet" href="path/to/file.css"> 向頁面引入樣式。


　　4，動態監聽打包檔案

　　預設情況下，所有原始檔的修改都需要重新執行 webpack 打包命令，這簡直太麻煩了。這時你需要動態的監聽所有需要被打包的檔案，這樣，每當我們修改了原始檔，webpack 都會自動的把它們重新打包到輸出檔案。實現方式也很簡單：

1 module.exports = {
2     watch:true //預設值是 false，不開啟
3 }

　　另一種方式是在執行 webpack 命令時新增 --watch 引數：

1 webpack --watch

　　動態監聽固然不錯，但還是有些不盡人意，比如每次都要手動重新整理頁面才能看到修改後的效果；不方便在伺服器執行頁面，像 ajax 請求等都不方便測試。

　　webpack 提供了 devServer 配置項，可以在打包後在記憶體中配置一個臨時伺服器，並把打包後的專案執行在該伺服器上。devServer 最強大的地方在於，它把輸出目錄也儲存在記憶體中，這大大提高了其打包的效率。

1 module.exports = {
2     devServer:{
3         contentBase:'./dist', //指定伺服器目錄
4         open:true //打包完成後立即在瀏覽器執行
5     }
6 }
7 //打包完成後預設執行在本地路徑8080埠，打包的時候別忘啦把 webpack 命令替換成 webpack-dev-server 哦

　　devServer 還有很多其他的配置項，你可以在需要的時候查閱 webpack 官網，根據需要配置你需要的選項。( 其實現在很多IDE開發工具都內建了相似的功能，根據需要選擇就可以了。)

　　5，bable 處理 ES6 語法

　　如果你在原始碼中使用了 ES6 的語法，可能很多老版本的瀏覽器並不能正確的執行。這時候你就需要 bable 來幫忙了，bable 是一款 JavaScript 編譯器，它的主要功能就是語法轉換，即把高版本的語法轉換成低版本的語法，用低版本的特性實現高版本的新特性。

　　在使用結合 webpack 使用 bable 之前，我們應該先安裝一些相關的包：

1 npm install --save-dev babel-loader @babel/core
2 # babel-loader用於連線webpack和bable，@babel/core是一個bable的核心庫，用於輔助語法轉換
3 npm install @babel/preset-env --save-dev
4 # @bable/preset-env 實際負責語法轉換
5 npm install --save @babel/polyfill
6 # @bable/polyfill 用於注入ES6 的一些新特性

　　webpack 中的配置：

 1 module: {
 2     rules: [
 3         {
 4            test: /\.js$/,
 5            exclude: /node_modules/, //排除node_modules中的檔案
 6            loader: "babel-loader",
 7            options:{
 8               presets:[
 9                  ["@babel/preset-env"], //負責實際的編譯工作
10                  {
11                      targets:{edge:"17",firefox:"60",chrom:"67",safari:"11"}, //設定執行環境瀏覽器版本臨界值，高於（包含）此版本將不使用 bable 編譯
12                      useBuiltIns:"usage" //檢測原始碼，僅注入使用到的ES6新特性
13                  }
14               ]
15            }
16         }
17     ]
18 }

　　原始碼中：

1 import "@bable/polyfill"
2 // some code

 　　關於 webpack 常用的配置就先介紹到這裡了，事實上，webpack 還有許多其他的配置項，要全部記住是不太現實的，通常我麼建議瞭解即可，當我們需要某些功能時，知道怎麼去查詢配置詳情即可。

三　　Vue-CLI

　　Vue-CLI 是基於 webpack 封裝而成的腳手架工具，專門用於 Vue 專案的管理，Vue-CLI 封裝了許多 webpack 的配置項，讓我們只需簡單的幾步就能實現 webpack 複雜的功能配置。Vue-CLI 極大的簡化了專案打包的配置，讓我們可以專注於專案本身，而不用過多的操心打包的事情。 

　　1，安裝

1 npm install -g @vue/cli

　　2，建立專案

1 vue create "專案名稱"

　　執行建立命令後，如果選擇預設設定，將不需要人工干預，直接會成生一個專案的基本目錄。如果選擇手動設定，則需要人工干預，提供必要的資訊。

　　預設設定中，Vue-CLI 會自動載入 Vue 專案需要的一些必要的包，後期可以根據需要再手動安裝其他的包就行了。Vue-CLI 預設提供了兩個命令：

1 npm run serve
2 #打包到記憶體並在虛擬伺服器啟動專案，實際使用了 webpack 的 devServer 配置項
3 npm run build
4 #打包專案

 　　基本的專案目錄包括：

　　當你運行了打包命令，預設還會建立一個 dist 目錄，部署專案時直接拷貝這個目錄到實際生產環境即可。

　　小技巧：Vue-CLI 打包的檔案被認為將直接在伺服器執行，所以如果你使用 file 協議執行 dist 下的檔案，將不會成功，Vue-CLI 官方推薦全域性安裝 http-server （nodejs 靜態檔案伺服器）（npm install serve -g；serve dist -s）或手動修改 publicPath 配置項為相對路徑，以對打包檔案進行測試，我建議自己在本機搭建一個 web 伺服器來測試，這樣能更加貼近生產環境。

　　3，配置檔案

　　預設情況下使用 Vue-CLI 建立的專案，不會包含配置檔案，這是因為該腳手架工具的設計理念是儘量簡化打包相關的配置和操作，並且它已經封裝了常用的配置項，不需要我們額外再配置。如果你需要手動配置，你可以在專案根目錄下新建一個 vue.config.js 的配置檔案，Vue-CLI 提供的配置項請點這裡查閱官網，這裡不一一舉例了。

　　如果確實遇到其封裝的配置不能滿足我們實際需要，Vue-CLI 也提供了一個 configureWebpack 這個配置選項，其值可以是一個物件或一個函式，如果你為其設定了一個物件，那麼你可以在這個物件中新增原生的 webpack 配置項。不過，Vue-CLI 建議，儘量不要在 configureWebpack 中配置已經封裝的選項，這樣做是因為 vue.config.js 中的值會被用在配置裡的多個地方，以確保所有的部分都能正常工作在一起。

　　4，圖形介面

　　Vue-CLI 不僅提供了常規的命令列介面，還提供了圖形化操作介面，這真的是把它的理念貫徹到了極致。

1 vue ui
2 # 安裝好 vue-cli 後，直接使用此命令就可以開啟圖形化介面了

　　圖形化介面我們一般戲稱是傻瓜式配置，只需要根據提示，用滑鼠點選開啟或是關閉一些配置選項就行了，很少需要自己輸入什麼內容或命令，所以這裡就不多講了，有興趣的朋友可以自己試一下。

　　寫在最後：工具會用就行了（除非你是製造工具的人），工作當中的重心依然是業務，遇到工具方面的問題查閱文件就可以了，畢竟網際網路發展的那麼快，但人的精力始終是有限的！如果內容有誤，歡迎指