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 编译，同步监听服务端和客户端代码。支持内存读取资源，不生成额外目录，快捷方便。
全面支持热更新，监听所有文件修改，实时渲染，实时响应，无需刷新。
编译报错机制完善，集成 overlay webpack 原生报错插件。

适用场景

适用于强依赖 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 里我来修复~

相关细节以及更多注意事项

掘金传送门

CRONWMMM/multi_page_app_template

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages