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.