preface

Before reading this article, you can take a look at the previous full stack introduction “NodeJS full stack development of a fully functional Express project (with complete source code)”. The project mainly adopts the front and back end separate development, the front-end part of the technology stack is based on Vue + iView, using VUE-CLI to build the front-end interface. The technology stack used in the back-end part is based on Node.js + Express + MySQL, and the back-end server built with Express.

After sharing to nuggets, received many small partners praise and like, hope to produce more such actual combat project technical articles. Nodejs full stack development can be used to provide light for those who want to enter the Nodejs full stack development.

I also received some tips and suggestions from some big wigs. One of the big wigs gave some optimization suggestions on the project. It was my former colleague who kept praising the Nodejs full stack project I shared. Finally came a sentence, brother still have a lot of optimization upgrade space oh. Or thank you for your support, please support my colleagues github.com/HEJIN2016 feel good to give a ❤️star, thank you.

After the project improvement, optimization, integration, upgrade, instantly feel a level of improvement, development efficiency is also improved.

Unmodified back-end API source address 👉 : github.com/jackchen012…

Unimproved front-end interface source address 👉 : github.com/jackchen012…

Online DEMO 👉 DEMO address: http://106.55.168.13:8082/

If you think this article is good, remember to click 👍 or ❤️star, your likes and stars are the motivation of the author to write more wonderful articles!

To highlight

Vue + Express + Webpack builds single-page application development and self-built scaffolding, including integration and optimization of Vue client and Express server. What inspects is the master degree to Webpack knowledge point. Let’s take a look at what Webpack is and why we use it.

What is a Wepack

WebPack can be thought of as a module baler: What it does is analyze the structure of your project, find JavaScript modules and other extension languages (Less, Sass, TypeScript, etc.) that browsers don’t run directly, and transform and package them into appropriate formats for browsers to use.

When Webpack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles. As shown below:


Webpack works by treating your project as a whole through a given master file (e.g. Index.js), Webpack will start with this file to find all of your project’s dependent files, process them with loaders, and finally package them into one (or more) browser-aware JavaScript files.

Why use it

Many web pages today can be thought of as feature-rich applications with complex JavaScript code and a lot of dependency packages. A number of good practices have emerged from the front-end community to simplify development:

  • Modularity allows us to break down complex programs into smaller files.
  • Development languages like TypeScript, which extend JavaScript, allow us to implement features that are not directly available in current versions of JavaScript, and then convert them to JavaScript files for browsers to recognize.
  • CSS preprocessors such as Scss and LESS
  • .

These improvements made development much more efficient, but files developed with them often required additional processing to be recognized by the browser, and manual processing was cumbersome, which provided the need for webPack-like tools.

Starting with WebPack V4.0.0, you don’t have to import a configuration file. However, WebPack is still highly configurable. There are four core concepts you need to understand before you begin:

  • Entry: The entry point indicates which module WebPack should use as a starting point for building its internal dependency graph.
  • Output: The Output attribute tells WebPack where to export the bundles it creates and how to name these files. The default is./dist.
  • Loader: Loader enables Webpack to handle non-javascript files (WebPack itself only understands JavaScript). Loader can convert all types of files into valid modules that WebPack can handle, and then you can take advantage of WebPack’s packaging capabilities to process them.
  • Plugins: Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment. Plug-in interfaces are extremely powerful and can be used to handle a wide variety of tasks.

For complete webpack configuration information, please go to the Chinese official website

The directory structure

├ ─ ─ the build/ / webpack configuration
│ ├ ─ ─ webpack. Client. Js// The webPack client packages the configuration
│ ├ ─ ─ webpack. DLL. Js// webPack DllPlugin packages the configuration
├ ─ ─ lib// DllPlugin related lib files
├ ─ ─ the SRC/ / the source code
│ ├ ─ ─ the client// client client source code │ │ ├ ─ ─ assets// Static resource images folder │ │ ├ ─ ─ the components// Common components │ │ ├─ Head.vue// Page header component │ ├─ ├─ Footer. Vue// Bottom component of the page │ │ ├ ─ ─ the router│ │ ├─ index.js// Single page route registration component │ │ ├ ─ ─ store// Status management folder │ │ ├─ index.js// State manage warehouse entry file │ │ ├─ modules// Module folder │ │ ├─ userinfo.js// User module status management file │ │ ├ ─ ─ views// Page routing component │ │ ├─ Home.vue// Home interface │ │ ├─ Login. Vue// Login interface │ │ ├ ─ ─ styles│ │ ├─ Base.SCSS// Base style file │ │ ├ ─ ─ utils│ │ ├─ Api.js// The unified encapsulation API interface calls methods │ │ ├─ Network.js// Axios encapsulation and interceptor configuration │ │ ├─ url.js// Automatically deploy the server environment │ │ ├─ valid.js// Encapsulate the common module method │ │ ├ ─ ─ index. HTML/ / HTML templates │ │ ├ ─ ─ App. Vue/ / the root component │ │ ├ ─ ─ the main js// Program entry file │ ├ ─ ─ server// Server source code │ │ ├ ─ ─ the db│ │ ├─ Dbconfig.js// Basic configuration of mysql database │ │ ├ ─ ─ routes│ │ ├─ index.js// Initialize routing information and customize global exception handling │ │ ├─ Tasks.js// Task routing module │ │ ├─ users.js// User routing module │ │ ├ ─ ─ services│ │ ├─ TaskService.js// Business logic processing - task related interface │ │ ├─ UserService.js// Business logic processing - user related interface │ │ ├ ─ ─ utils│ │ ├─ Constant.js// Custom constants │ │ ├─ index.js// Encapsulate connection to mysql module │ │ ├─ MD5.js// Encapsulates the MD5 method at the back end │ │ ├─ User-jwt.js// jwt-token validation and parsing functions │ │ ├ ─ ─ app. Js// Server entry in prod │ │ ├ ─ ─ devApp. Js// Server entry in dev environment │ │ └ ─ ─ the route. Js// Express routing middleware configuration ├ ─ ─static // Static file directory ├ ─ ─ babele. Config. Js/ / the Babel - loader configuration ├ ─ ─ the config│ ├ ─ ─ index. Js// Project global public configuration (port, host, etc.) ├ ─ ─ postcss. Config. Js/ / postcss - loader configuration ├ ─ ─ editorconfig// Editor configuration ├ ─ ─ gitignore// git ignores items ├ ─ ─ package - lock. Json// NPM locks files ├ ─ ─ package. Json/ / NPM configuration ├ ─ ─ pm2. Json/ / pm2 entrance ├ ─ ─ the README, md/ / the README document Copy the code



Technology stack

  • Webpack 4.x
  • ES6
  • Vue 2.6
  • Express 4.17
  • The view – the design of 4.3
  • MySQL 5.7

Webpack optimization point

  1. Happypack, webpack multithreaded packaging, significantly improve local packaging speed.

  2. The webPack DllReferencePlugin was introduced to pre-pack common code (Polyfill and Vue family buckets) to speed up builds.

  3. Support less, SASS precompilation, support postCSS configuration, automatically introduce polyfill (can be deleted).

  4. Manually build webpack scaffolding, separate from the official VUE-CLI, and customize webPack configuration as required.

  5. Once running, it can run both the client and the server, with a distinction between development environment (DEV) and production environment (PROD). The Dev environment uses the Express slot in WebPack devServer, and the PROd environment uses Express Static to map front-end static files.

Run the command

// Download the decompression project
Vue-server-template.zipcd vue-server-template

// Install dependencies
npm install OR yarn  / / packaging lib npm run postinstall  // Local development npm run dev  // Run online npm start  // Access address http://localhost:3200 Copy the code

NPM script introduction

// Package lib (NPM install automatically calls this hook)
npm run postinstall

// Execute webpack.dll
npm run build-lib
 // Run locally npm run dev  // Package the client npm run build-client  / / client - server package npm run build-server  // Use pM2 to run the project npm run start-project  // Run the project online npm start Copy the code


Write in the last

Nodejs Advanced Full stack (Vue upgrade) If you like it, please click 👍 and ❤️, thank you again. If I get more than 200 likes, I’ll publish a react+ ANTD full stack version. 😃

Recommend relevant high-quality articles to read

  • Develop a micro channel mini program personalized resume, can open the door of big factory and get tickets? (Attached source code)
  • Vue+Echarts to build big data visualization cool display company brand actual combat project sharing (attached source code)
  • The front-end must know what MySQL is all about – the NodeJS full stack growth path
  • 2020 worth collecting and learning more than 280 H5 games, from the beginning to the thorough understanding of it (attached source code)

Quick access to the full version of the source code: pay attention to the public number, the background reply “full stack” two words can be obtained.

Welcome to pay attention to the author’s public number: lazy code farmers