webpack配置之后端渲染详解


Posted in Javascript onOctober 26, 2017

webpack配置之后端渲染2017年, vue, react, angular 已经占据前端的主流, 不得不承认这也是前端的未来发展方向. 但是后端渲染的开发方式仍然很常见, 不管是个人项目还是商业项目, 后端渲染搞起来真是糙猛快. 但是借着前端发展的东风, 后端渲染也有很大的改进空间. 这里就介绍一下我自己的实践经验: 前后端不分离的情况下实现热加载以及一定程度下的前端主导开发. 这里以koa为例, 但是仓库里也有django版. 理论上所有语言都可以实现. 有兴趣可以看下, 仓库地址在文末.

效果图

webpack配置之后端渲染详解

原理

原理说起来还是很简单的:

1、独立启动静态资源服务器打包生成资源列表(manifest)

通过webpack-manifest-plugin插件生成manifest.json文件

new ManifestPlugin({
  writeToFileEmit: true,
  publicPath: 'http://localhost:5000/static/'
})

文件结果如图:

webpack配置之后端渲染详解

服务器读取资源列表加载到模板文件中

app.use(async (ctx, next) => {
 const manifest = await fs.readFile(path.resolve(__dirname, 'assets/bundles/manifest.json'))
 ctx.state = {
  static: JSON.parse(manifest.toString())
 }
 await next()
})

这个中间件通过读去manifest.json将资源列表挂载到ctx.state(模板变量)中, 之后就可以直接在模板中引用静态资变量了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>{{ title }}</title>
 <link rel="stylesheet" href="{{static['test.css']}}" rel="external nofollow" >
</head>
<body>
 <h1>Hello, World</h1>
 
 <script src="{{static['test.js']}}"></script>
</body>
</html>

需要注意的是由于后端渲染的一般是多入口, 所以只需要在对应的模板中引入需要的入口文件.

热加载

热加载其实也有很多解决方案: browsersync, live reload 等等, 但是这些都是full reload 只是减少了f5的频率, webpack的热加载就方便很多了通过websocket(具体我也不清楚), 配置起来也很简单.

在入口文件中加上

hot: 'webpack/hot/only-dev-server',
devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'

/**
完整版
entry: {
  index: './assets/index.js',
  test: './assets/test.js',
  hot: 'webpack/hot/only-dev-server',
  devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'
},
*/

插件中加上: new webpack.HotModuleReplacementPlugin()

需要注意的有两点:

  1. extract-text-webpack-plugin 加上之后就无法hot reload, 开发配置不要加上这个插件
  2. 根据webpack的文档, 每个入口文件都需要加上下面一段代码才能实现 js的hot reload
if (module.hot) {
 module.hot.accept()
}

完整配置和代码这里就不贴了, 仓库地址(django部分代码在master分支): https://github.com/xiadd/wepack-mutipage

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 #Javascript
node文字生成图片的示例代码
Oct 26 #Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 #Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 #Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 #Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 #Javascript
You might like
php 前一天或后一天的日期
2008/06/28 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
行政办公室岗位职责
2014/03/18 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
员工工作及收入证明
2014/10/28 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书