# muti_page_app_template

**Repository Path**: CRONWMMM/muti_page_app_template

## Basic Information

- **Project Name**: muti_page_app_template
- **Description**: 多页应用模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-04-11
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: webui

**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`

> 项目运行起来，默认首页 demo 提供了大部分 ejs 的使用方式，有部分语法不支持，可以使用 demo 中提供的方式替代。

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

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

#### 关于 publicPath

可能有朋友不太了解 `publicPath` 的机制，这也确实是理解起来比较麻烦的知识点，这里大概做个介绍。

`publicPath` 是 `webpack` 配置文件中 `output` 选项里的一项，`output` 告诉了 `webpack` 打包出来的 `js bundle` 的一些信息，比如
打包后的文件名、存放路径等。因为最后打出来的还是使用 `script` `link` 等标签引用的资源文件，所以就要用一种方式指定这些资源的前缀，这种方式就是 `publiPath`。
`publicPath` 定义的内容，将会作为前缀直接写到打包后的资源路径前面。这样有了一个前缀资源路径的标识，`express` 等后端框架就能知道这些是资源文件请求，不用做处理，就可以根据这些标识直接将请求映射到对应的资源文件目录，直接返回资源。


#### 关于热更新

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

#### 关于使用 script / link 标签引入
js 文件和样式文件，都可以在页面的入口 js 文件中使用 `import` 方式进行引入，考虑到有项目需要使用一些全局的样式库（比如 `bootstrap`），因此还是有需要标签引入资源的场景。

1. 需要在 `webpack` 配置文件中使用 `copy-webpack-plugin` 将对应路径下的资源文件拷贝至打包后的文件夹中。
2. 在页面中需要使用 `<script> / <link>` 标签引入资源，注意！引入时需要使用 `publicPath` 配置对应的路由地址，否则无法访问到。

具体操作可 `clone` 该项目运行查看

#### 改造使用

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)