前端工具配置（webpack 4、vue-cli 3）

　　隨著前端專案復雜度的增加，其所依賴的資源也越來越多，從最初的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="https://www.cnblogs.com/ruhaoren/p/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 后，直接使用此命令就可以打開圖形化界面了

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

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

標籤：JavaScript

上一篇：linux系統中運行node行程，無法殺死行程

下一篇：原生JS實作輪播圖