# multi_page_app_template

**Repository Path**: mirrors_singod/multi_page_app_template

## Basic Information

- **Project Name**: multi_page_app_template
- **Description**: webpack4 + ejs + express 多页应用项目架构模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2026-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack4 + ejs + express 服务端渲染多页应用项目架构

#### 介绍

webpack4 + ejs + express 服务端渲染多页应用项目架构

#### 软件架构

1. 打包工具：`webpack 4.16.5`
2. 模板语言：`ejs 2.6.1`
3. 服务端框架：`express 4.16.4`

#### 使用说明

1. 安装依赖：`npm install`
2. 开发环境：`npm run dev` 浏览器访问 `http://localhost:8888`
3. 打包构建：`npm run build`
4. 生产环境：`npm run server`
5. 一键部署：`npm run deploy`

#### 功能介绍：
1. 基于 `ejs` 模板语言开发，支持服务端渲染。
2. 开发环境一键启动本地服务和 `webpack` 编译，同步监听服务端和客户端代码。支持内存读取资源，不生成额外目录，快捷方便。
3. 全面支持热更新，监听所有文件修改，实时渲染，实时响应，无需刷新。
4. 编译报错机制完善，集成 `overlay` webpack 原生报错插件。

#### 适用场景
1. 适用于强依赖 SEO 的项目，比如公司官网。
2. 适用于以 `node` 做为服务端 / 中间层服务的项目架构，前后端分离式开发，由前端提供统一的数据组装和模板渲染。

#### 关于热更新

目前项目已全面支持热更新（`js/css/less/ejs` 文件修改均可热替换），关于热更新，有几点需要注意：
1. 开发环境下，不要使用 `extract-text-webpack-plugin` 来做样式文件的抽离，否则 `webpack` 无法监听样式文件变化，样式热加载就不会生效。
2. `webpack` 原生没有提供视图文件的热更新支持，原因是视图文件不是通过 `require/import` 方式引入的，webpack 无法监听其变化，这边我提供了一个扩展方式来支持视图热更新，具体实现可以看代码。

#### 改造使用

1. 如果使用别的模板文件，例如 `jade`，可能需要将 `ejs` 的相关 `loader` 替换为对应模板文件的 `loader`，并将项目中的 `ejs` 后缀替换为 `jade` ，这些替换可能涉及 webpack 构建文件和部分服务端文件，其他代码基本相同，无需改动。
2. 推荐使用 `ejs` 作为源文件的视图文件使用，如果最终需要将 `ejs` 文件打包成 `html` 文件，可在 `build/config.json` 里修改 `EXT` 配置项，将默认值 `ejs` 改成 `html`，这样最终生成的就是 `html` 网页文件。
3. 如果不需要使用模板文件，可将项目中的 `ejs` 文件替换为自己的 `html` 文件，并删除 `webpack` 中无关的模板处理  `loader` 例如该项目里使用到的 `ejs-html-loader`，只针对 `html` 后缀文件使用 `html-loader`（这些文件及文件名的修改和替换，可能涉及 webpack 构建文件和部分服务端文件，报错不用担心，仔细修改，根据错误提示多尝试几次应该没问题，实在不行可以给我 issue）。

#### 参与贡献

喜欢的话给个 Star，多谢多谢 😃😃，如果有问题提到 issue 里我来修复~

#### 相关细节以及更多注意事项
[掘金传送门](https://juejin.im/post/5cb1aabdf265da037b6101d3)