Mastering Vue Multi‑Page Apps with Webpack: A Step‑by‑Step Guide

Introduction

While a single‑page Vue app is usually preferred, multi‑page architecture can be advantageous in special scenarios such as QQ's multi‑webview design, iOS swipe‑back navigation, and avoiding page refreshes on back actions.

Goal

The article demonstrates how to create a pure‑frontend multi‑page project and ultimately a Node.js multi‑page server‑side rendering setup.

Source Code

Repository: https://github.com/kenkozheng/HTML5_research/tree/master/Vue-Multipages-Webpack3

Step 1: Set Up the Base Project with vue‑cli

Install vue‑cli and initialize a project using the webpack‑simple template.

npm i -g vue-cli

vue init webpack-simple my-project

The generated directory structure includes configuration files and a basic Vue entry.

Project Files Overview

.babelrc – Babel configuration (uses env plugin, leaves module syntax to webpack)

.editorconfig – optional editor settings

.gitignore – Git ignore rules

index.html – basic HTML entry for a single page

webpack.config.js – distinguishes development and production, adds uglify in production

src directory – Vue single‑file components and

main.js

Step 2: Run and Analyze the Prototype

Execute npm run dev to start a development server listening on port 8080 with hot‑module replacement.

Key snippets: .babelrc Uses the env preset and disables module transformation for webpack. webpack.config.js Shows entry configuration, output filename pattern [name].[hash:8].js, and explains path vs publicPath.

Key Webpack Concepts

entry can be an array, object, or string; determines which files are bundled.

output.filename supports placeholders like [name] and [hash:8] for dynamic naming.

path is the physical output directory; publicPath is the URL prefix for assets.

module.rules define loaders; file-loader handles assets and can create directories automatically.

resolve.alias creates shortcuts such as vue$ to a specific build.

devServer configures the hot‑reload server; uses memory-fs unless WriteFilePlugin forces disk writes.

devtool controls source‑map generation for easier debugging.

Step 3: Transform to Multi‑Page

Create multiple Vue entry files, configure multiple entries in webpack, and reuse HTML via html-webpack-plugin.

Automated HTML Generation

Install the plugin and add an instance for each page in the webpack configuration. npm install html-webpack-plugin --save-dev Configure the pages array to generate multiple HtmlWebpackPlugin instances automatically.

Project Optimizations

Global CSS can be imported in main.js and will be injected into the HTML.

Image filenames include a hash for cache busting; placing them in dedicated directories simplifies CDN configuration.

Use HtmlWebpackInlineSourcePlugin (inlineSource field) to inline HTML, JS, and CSS, reducing HTTP requests for mobile users.

Run the Final Project

Clone the repository and start the development server with npm run dev. The multi‑page setup will automatically generate page1 and page2 bundles.