Nodejs全棧進階-Vue+Express+Webpack自建腳手架完善單頁面應用，檔次瞬間提升（附完整源碼）

時間 2020-07-11

標籤 nodejs 進階 vue+express+webpack vue express webpack 自建腳手架完善頁面應用檔次瞬間提升完整源碼简体版

原文原文鏈接

前言

閱讀本文以前，能夠先看看上一篇全棧入門《NodeJS全棧開發一個功能完善的Express項目(附完整源碼)》，項目主要是採用先後端分離開發，前端部分使用的技術棧是基於Vue + iView，用vue-cli構建前端界面，後端部分使用的技術棧是基於Node.js + Express + MySQL，用Express搭建的後端服務器。css

分享到掘金後，受到不少小夥伴的點贊和喜歡，但願能夠多出品這樣的實戰項目技術文章。可讓想進入Nodejs全棧開發的小夥伴提供指明燈，少走彎路，可供學習參考，減小工做量，提升工做效率。html

也收到一些大佬的指點和建議，其中有位大佬，給了一些項目上的優化建議，是我曾經的同事，他看了我分享的Nodejs全棧項目後，嘴上不停的誇讚，俺瞬間臉紅起來。最後卻來一句，兄弟還有很大的優化升級空間哦。仍是感謝各位大佬的支持，請你們也支持一下個人同事github.com/HEJIN2016以爲不錯就給個❤️star，謝謝。前端

通過項目改良、優化、整合、升級後，瞬間感受提高一個檔次，開發效率也提升了。vue

未改良後端API接口源碼地址👉：github.com/jackchen012…node

未改良前端界面源碼地址👉：github.com/jackchen012…mysql

在線演示DEMO地址👉：http://106.55.168.13:8082/react

若是以爲本文還不錯，記得點個👍或者給個❤️star，大家的贊和star是做者編寫更多更精彩文章的動力！webpack

劃重點

Vue + Express + Webpack 構建單頁面應用開發和自建腳手架，包含Vue客戶端和Express服務端的整合優化。考察的是對Webpack知識點的掌握程度。咱們先來認識一下，什麼是Webpack，爲何要用它。ios

什麼是Wepack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Less、Sass、TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。git

當 Webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。以下圖所示：

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

爲何要用它

現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法：

模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
Scss，less等CSS預處理器
....

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。

從 webpack v4.0.0 開始，能夠不用引入一個配置文件。然而，webpack 仍然仍是高度可配置的。在開始前你須要先理解四個核心概念：

入口(entry)：入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。
輸出(output)：output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。
loader：loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。
插件(plugins)：loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

如需瞭解webpack完整配置信息請移步到中文官網

目錄結構

├── build                         // webpack配置
 │ ├── webpack.client.js // webpack client端打包配置  │ ├── webpack.dll.js // webpack DllPlugin打包配置  ├── lib // DllPlugin 相關lib文件  ├── src // 源代碼  │ ├── client // client客戶端源代碼  │ │ ├── assets // 靜態資源圖片文件夾  │ │ ├── components // 公用組件  │ │ │ ├── Header.vue // 頁面頭部組件  │ │ │ ├── Footer.vue // 頁面底部組件  │ │ ├── router  │ │ │ ├── index.js // 單頁面路由註冊組件   │ │ ├── store // 狀態管理文件夾  │ │ │ ├── index.js // 狀態管理倉庫入口文件   │ │ │ ├── modules // 模塊文件夾   │ │ │ │ ├── userInfo.js // 用戶模塊狀態管理文件   │ │ ├── views // 頁面路由組件  │ │ │ ├── Home.vue // 首頁界面  │ │ │ ├── Login.vue // 登陸界面   │ │ ├── styles  │ │ │ ├── base.scss // 基礎樣式文件  │ │ ├── utils  │ │ │ ├── api.js // 統一封裝API接口調用方法  │ │ │ ├── network.js // axios封裝與攔截器配置  │ │ │ ├── url.js // 自動部署服務器環境  │ │ │ ├── valid.js // 統一封裝公用模塊方法  │ │ ├── index.html // html模板  │ │ ├── App.vue // 根組件  │ │ ├── main.js // 程序入口文件  │ ├── server // server 源代碼  │ │ ├── db  │ │ │ ├── dbConfig.js // mysql數據庫基礎配置  │ │ ├── routes  │ │ │ ├── index.js // 初始化路由信息，自定義全局異常處理  │ │ │ ├── tasks.js // 任務路由模塊  │ │ │ ├── users.js // 用戶路由模塊  │ │ ├── services  │ │ │ ├── taskService.js // 業務邏輯處理 - 任務相關接口  │ │ │ ├── userService.js // 業務邏輯處理 - 用戶相關接口  │ │ ├── utils  │ │ │ ├── constant.js // 自定義常量  │ │ │ ├── index.js // 封裝鏈接mysql模塊  │ │ │ ├── md5.js // 後端封裝md5方法  │ │ │ ├── user-jwt.js // jwt-token驗證和解析函數  │ │ ├── app.js // prod環境下的server 入口  │ │ ├── devApp.js // dev環境下的server 入口  │ │ └── route.js // express路由中間件配置  ├── static // 靜態文件目錄  ├── babele.config.js // babel-loader 配置  ├── config  │ ├── index.js // 工程全局公共配置（port、host等）  ├── postcss.config.js // postcss-loader 配置  ├── .editorconfig // 編輯器配置  ├── .gitignore // git 忽略項  ├── package-lock.json // npm 鎖文件  ├── package.json // npm 配置  ├── pm2.json // pm2 入口  ├── README.md // README 文檔 複製代碼

技術棧

Webpack 4.x
ES6
Vue 2.6
Express 4.17
view-design 4.3
MySQL 5.7

Webpack優化點

引入happypack，實現webpack多線程打包，顯著提升本地打包速度。
引入webpack DllReferencePlugin，提早打包公共代碼（polyfill和vue全家桶），提升構建速度。
支持less、sass預編譯，支持postcss配置，自動引入polyfill（可刪除）。
手動搭建webpack腳手架，脫離官方vue-cli，可根據實際需求自定義調整webpack配置。
一經運行，便可同時運行客戶端和服務端，並針對開發環境(dev)和生產環境(prod)作區分。dev環境使用webpack devServer中的express插槽，prod環境使用express static映射前端靜態文件。

運行命令

// 下載解壓工程
vue-server-template.zip（文末下載完整版源碼） cd vue-server-template  // 安裝依賴 npm install OR yarn  // 打包lib npm run postinstall  // 本地開發 npm run dev  // 線上運行 npm start  // 訪問地址 http://localhost:3200 複製代碼

npm腳本介紹

// 打包lib（npm install時自動調用該鉤子）
npm run postinstall  // 執行webpack.dll.js，打包lib npm run build-lib  // 本地運行 npm run dev  // 打包客戶端 npm run build-client  // client-server打包 npm run build-server  // 使用pm2運行工程 npm run start-project  // 線上運行工程 npm start 複製代碼