webpack4 + ejs + express 服务端渲染多页应用项目架构
介绍
webpack4 + ejs + express 服务端渲染多页应用项目架构
软件架构
- 打包工具：
webpack 4.16.5 - 模板语言：
ejs 2.6.1 - 服务端框架：
express 4.16.4
使用说明
- 安装依赖：
npm install - 开发环境：
npm run dev浏览器访问http://localhost:8888 - 打包构建：
npm run build - 生产环境：
npm run server - 一键部署：
npm run deploy
项目运行起来，默认首页 demo 提供了大部分 ejs 的使用方式，有部分语法不支持，可以使用 demo 中提供的方式替代。
功能介绍：
- 基于
ejs模板语言开发，支持服务端渲染。 - 开发环境一键启动本地服务和
webpack编译，同步监听服务端和客户端代码。支持内存读取资源，不生成额外目录，快捷方便。 - 全面支持热更新，监听所有文件修改，实时渲染，实时响应，无需刷新。
- 编译报错机制完善，集成
overlaywebpack 原生报错插件。
适用场景
- 适用于强依赖 SEO 的项目，比如公司官网。
- 适用于以
node做为服务端 / 中间层服务的项目架构，前后端分离式开发，由前端提供统一的数据组装和模板渲染。
关于 publicPath
可能有朋友不太了解 publicPath 的机制，这也确实是理解起来比较麻烦的知识点，这里大概做个介绍。
publicPath 是 webpack 配置文件中 output 选项里的一项，output 告诉了 webpack 打包出来的 js bundle 的一些信息，比如
打包后的文件名、存放路径等。因为最后打出来的还是使用 script link 等标签引用的资源文件，所以就要用一种方式指定这些资源的前缀，这种方式就是 publiPath。
publicPath 定义的内容，将会作为前缀直接写到打包后的资源路径前面。这样有了一个前缀资源路径的标识，express 等后端框架就能知道这些是资源文件请求，不用做处理，就可以根据这些标识直接将请求映射到对应的资源文件目录，直接返回资源。
关于热更新
目前项目已全面支持热更新（js/css/less/ejs 文件修改均可热替换），关于热更新，有几点需要注意：
- 开发环境下，不要使用
extract-text-webpack-plugin来做样式文件的抽离，否则webpack无法监听样式文件变化，样式热加载就不会生效。 webpack原生没有提供视图文件的热更新支持，原因是视图文件不是通过require/import方式引入的，webpack 无法监听其变化，这边我提供了一个扩展方式来支持视图热更新，具体实现可以看代码。
关于使用 script / link 标签引入
js 文件和样式文件，都可以在页面的入口 js 文件中使用 import 方式进行引入，考虑到有项目需要使用一些全局的样式库（比如 bootstrap），因此还是有需要标签引入资源的场景。
- 需要在
webpack配置文件中使用copy-webpack-plugin将对应路径下的资源文件拷贝至打包后的文件夹中。 - 在页面中需要使用
<script> / <link>标签引入资源，注意！引入时需要使用publicPath配置对应的路由地址，否则无法访问到。
具体操作可 clone 该项目运行查看
改造使用
- 如果使用别的模板文件，例如
jade，可能需要将ejs的相关loader替换为对应模板文件的loader，并将项目中的ejs后缀替换为jade，这些替换可能涉及 webpack 构建文件和部分服务端文件，其他代码基本相同，无需改动。 - 推荐使用
ejs作为源文件的视图文件使用，如果最终需要将ejs文件打包成html文件，可在build/config.json里修改EXT配置项，将默认值ejs改成html，这样最终生成的就是html网页文件。 - 如果不需要使用模板文件，可将项目中的
ejs文件替换为自己的html文件，并删除webpack中无关的模板处理loader例如该项目里使用到的ejs-html-loader，只针对html后缀文件使用html-loader（这些文件及文件名的修改和替换，可能涉及 webpack 构建文件和部分服务端文件，报错不用担心，仔细修改，根据错误提示多尝试几次应该没问题，实在不行可以给我 issue）。
参与贡献
喜欢的话给个 Star，多谢多谢 😃😃，如果有问题提到 issue 里我来修复~