开源软件名称:muti_page_app_template
开源软件地址:https://gitee.com/CRONWMMM/muti_page_app_template
开源软件介绍:
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 编译,同步监听服务端和客户端代码。支持内存读取资源,不生成额外目录,快捷方便。 - 全面支持热更新,监听所有文件修改,实时渲染,实时响应,无需刷新。
- 编译报错机制完善,集成
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,多谢多谢 |
请发表评论