前言

阅读本文之前，可以先看看上一篇全栈入门《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优化点

引入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

写在最后

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

推荐相关优质文章阅读

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

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

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

前言

划重点