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 当前日期加(天、周、月、年)
Aug 09 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue观察模式浅析
Sep 25 Javascript
js实现筛选功能
Nov 24 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
php全排列递归算法代码
2012/10/09 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue观察模式浅析
2018/09/25 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python正则表达式和元字符详解
2018/11/29 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
学校后勤岗位职责
2014/02/19 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
财务负责人任命书
2014/06/06 职场文书
关于诚信的活动方案
2014/08/18 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
java泛型通配符详解
2021/07/25 Java/Android
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技