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 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
vue权限问题的完美解决方案
May 08 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
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中实现图片的锐化
2006/10/09 PHP
5.PHP的其他功能
2006/10/09 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python处理csv中的空值方法
2018/06/22 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python之array赋值技巧分享
2019/11/28 Python
Python time库基本使用方法分析
2019/12/13 Python
python中return如何写
2020/06/18 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
Android面试题及答案
2015/09/04 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
工商管理本科毕业生求职信范文
2013/10/05 职场文书
大学班级文化建设方案
2014/05/06 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
安全承诺书
2015/01/19 职场文书
演讲开场白台词大全
2015/05/29 职场文书
辩论会主持词
2015/07/03 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python