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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
php汉字转拼音的示例
2014/02/27 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
node app 打包工具pkg的具体使用
2019/01/17 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
C语言50道问题
2014/10/23 面试题
一组SQL面试题
2016/02/15 面试题
2015年党建工作总结
2015/03/30 职场文书
追悼会家属答谢词
2015/09/29 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫