Parcel 最简 MPA 多页面项目模板

Parcel 最简 MPA 多页面项目模板（零配置、直接运行）

1. 项目目录结构

mpa-parcel/
├── package.json
├── src/
│   ├── common/
│   │   ├── common.css   # 全局公共样式
│   │   └── common.js    # 全局公共脚本
│   ├── index.html       # 首页
│   ├── about.html       # 关于页
│   └── news.html        # 资讯页

2. 初始化依赖

# 新建文件夹
mkdir mpa-parcel && cd mpa-parcel

# 初始化package
npm init -y

# 安装parcel
npm install parcel --save-dev

3. package.json 配置脚本

{
  "name": "parcel-mpa",
  "scripts": {
    "dev": "parcel src/*.html",
    "build": "parcel build src/*.html"
  },
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

4. 核心文件代码

src/common/common.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: system-ui, sans-serif;
  padding: 2rem;
}
.nav {
  margin-bottom: 2rem;
  gap: 1rem;
  display: flex;
}
.nav a {
  padding: 6px 12px;
  background: #409eff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

src/common/common.js

console.log("全局公共脚本，所有页面都会加载");

src/index.html（首页）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!-- 引入公共样式 -->
  <link rel="stylesheet" href="./common/common.css">
</head>
<body>
  <div class="nav">
    <a href="./index.html">首页</a>
    <a href="./about.html">关于我们</a>
    <a href="./news.html">资讯</a>
  </div>

  <h1>Parcel MPA 首页</h1>
  <p>多页面原生支持，零配置</p>

  <script src="./common/common.js"></script>
</body>
</html>

src/about.html & news.html

仅替换标题即可，结构完全一致，举例 about.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>关于我们</title>
  <link rel="stylesheet" href="./common/common.css">
</head>
<body>
  <div class="nav">
    <a href="./index.html">首页</a>
    <a href="./about.html">关于我们</a>
    <a href="./news.html">资讯</a>
  </div>

  <h1>关于页面</h1>
  <p>Parcel 多页面应用演示</p>

  <script src="./common/common.js"></script>
</body>
</html>

5. 运行命令

# 开发环境 热更新、HMR
npm run dev

# 生产打包，输出到 dist 目录
npm run build

关键特点

  1. 完全零配置，无需任何 parcelrc / 配置文件
  2. 每个 HTML 独立入口，打包后页面相互独立
  3. 公共 css/js 自动复用，不会重复打包
  4. 直接使用相对路径跳转，原生 MPA 体验
  5. 天然支持 TS、Less、Sass、图片、字体等资源
posted @ 2026-04-25 00:41  卓能文  阅读(8)  评论(0)    收藏  举报