Nodejs全栈进阶-Vue+Express+Webpack自建脚手架完善单页面应用，档次瞬间提升（附完整源码）

前言

阅读本文以前，能够先看看上一篇全栈入门《NodeJS全栈开发一个功能完善的Express项目(附完整源码)》，项目主要是采用先后端分离开发，前端部分使用的技术栈是基于Vue + iView，用vue-cli构建前端界面，后端部分使用的技术栈是基于Node.js + Express + MySQL，用Express搭建的后端服务器。

分享到掘金后，受到不少小伙伴的点赞和喜欢，但愿能够多出品这样的实战项目技术文章。可让想进入Nodejs全栈开发的小伙伴提供指明灯，少走弯路，可供学习参考，减小工做量，提升工做效率。

也收到一些大佬的指点和建议，其中有位大佬，给了一些项目上的优化建议，是我曾经的同事，他看了我分享的Nodejs全栈项目后，嘴上不停的夸赞，俺瞬间脸红起来。最后却来一句，兄弟还有很大的优化升级空间哦。仍是感谢各位大佬的支持，请你们也支持一下个人同事github.com/HEJIN2016以为不错就给个❤️star，谢谢。

通过项目改良、优化、整合、升级后，瞬间感受提高一个档次，开发效率也提升了。

未改良后端API接口源码地址👉：github.com/jackchen012…

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

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

若是以为本文还不错，记得点个👍或者给个❤️star，大家的赞和star是做者编写更多更精彩文章的动力！

划重点

Vue + Express + Webpack 构建单页面应用开发和自建脚手架，包含Vue客户端和Express服务端的整合优化。考察的是对Webpack知识点的掌握程度。咱们先来认识一下，什么是Webpack，为何要用它。

什么是Wepack

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Less、Sass、TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

当 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优化点

1. 引入happypack，实现webpack多线程打包，显著提升本地打包速度。

2. 引入webpack DllReferencePlugin，提早打包公共代码（polyfill和vue全家桶），提升构建速度。

3. 支持less、sass预编译，支持postcss配置，自动引入polyfill（可删除）。

4. 手动搭建webpack脚手架，脱离官方vue-cli，可根据实际需求自定义调整webpack配置。

5. 一经运行，便可同时运行客户端和服务端，并针对开发环境(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 复制代码

写在最后

Nodejs全栈进阶（Vue升级版）就分享到这，文章若有不妥之处，欢迎批评指正。若是你们喜欢，就请点个👍和❤️收藏，再次感谢。若是点赞数超过200，我就在出一篇react+antd全栈版本。😃

推荐相关优质文章阅读

• 开发一款微信小程序的个性简历，能打开大厂之门并得到门票？（附源码）
• Vue+Echarts构建大数据可视化酷炫展现公司品牌实战项目分享（附源码）
• 前端必知必会MySQL的那些事儿 - NodeJS全栈成长之路
• 2020值得收藏与学习280多款H5小游戏，从入门到完全了解它（附源码）

快速获取完整版源码方式：关注公众号，后台回复“全栈”二字便可获取。

欢迎关注做者公众号：懒人码农