webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)
“热更新”:对应的是 'webpack-dev-middleware' 中间件
“热加载”:对应的是 'webpack-hot-middleware' 中间件
为了使用这两个中间件,必须修改“webpack.config.js"和”server.js“
webpack配置文件(“webpack.config.js")和上一篇博文写的大致相同,下面给出一个vue+webpack开发常用的配置:
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); module.exports = {
entry: ['webpack-hot-middleware/client','./index.js'],
output:{
path: path.resolve(__dirname,'./dist'),
filename: '[name].bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new htmlPlugin({
template: path.resolve(__dirname,'./index.html')
})
],
resolve:{
extensions: ['.js','.vue'],
alias:{
'vue':'vue/dist/vue.js',
'$': path.resolve(__diraname, 'src')
}
},
module:{
loaders:[
{
test: /\.js$/,
loader: 'babel-loader?presets=env',
include: path.resolve(__dirname,'src')
},{
test: /\.vue$/,
loader: 'vue-loader',
include: path.resolve(__dirname,'src')
}
]
}
}
ps:这里额外说一下alias,这里可以理解为把import xx from 'yyy' 的 ‘yyy’替换掉,例如import App from '@/views/app'变成了import App from 'D://xxx1/xxx2/src/views/app'
值得注意的是entry和plugins的变化:
entry多引入了一个'webpack-hot-middleware/client'入口文件 ,这个很明显就是一个核心为“window.location.reload();”的js文件,用于刷新浏览器,生成的时候会被webpack一并打包进bundle.js
plugins多了两个:
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
官方解释大概是说用来替换一些字解释,使得错误界面不会太乱。
你会发现这两处改写都是为了'webpack-hot-middleware'刷新浏览中间件而改写的。
express的写法(server.js)如下:
const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.js');
//给webpack带上配置
const compiler = webpack(config);
//自动更新编译代码中间件
const devMiddleWare = require('webpack-dev-middleware')(complier,{});
//自动刷新浏览器中间件
const hotMiddleWare = require('webpack-hot-middleware')(compiler); const server = express();
//调用2个中间件
server.use(devMiddleWare);
server.use(hotMiddleWare); server.listen(8088);
完事儿~~
这个时候你去试下修改app.vue那些文件,你就会发现编译的代码自动刷新了~~
webpack3.6新增了简易方法
webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)的更多相关文章
- 【Quick 3.3】资源脚本加密及热更新(三)热更新模块
[Quick 3.3]资源脚本加密及热更新(三)热更新模块 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 lua相对于c++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...
- 结合webpack 一步一步实现懒加载的国际化简易版方案
想法来源于工作需求,最后倒腾出一个国际化工作流,期望是这样的: 1. 自动化处理国际化文案(表现为转义翻译人员给到的文件处理成技术人员所识别的文件) 2. 转化后的国际化文件能够按需加载,实现懒加载的 ...
- webpack实现“热更新”和“热加载”(webpack3.6新增)
之前的博文有提到怎么样去实现热更新,但是居然要用到另外一个node框架(express)而且新增了一个入口(entry)两个插件(plugin)来实现,大大提高了配置的复杂度,这样其实对使用webpa ...
- 热更新应用--热补丁Hotfix学习笔记
一.热补丁简介 热补丁主要是用于将纯C#工程在不重做的情况下通过打补丁的形式改造成具备lua热更新功能工程,主要是让原来脚本中Start函数和Update函数等函数代码块重定向到lua代码. 二.第一 ...
- Android热修复(动态加载)方案汇总
整理了以下动态加载的方案,便于在项目中使用时查阅: Dexposed github (https://github.com/alibaba/dexposed) AndFix github (https ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- 在webpack自定义配置antd的按需加载和修改主题色
最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...
- Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
- webpack:代码分割与按需加载
代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...
随机推荐
- dotnet core webapi 发布部署到docker的步骤
1. 创建web api项目,编译并测试成功 2. 在项目的根目录添加Dockerfile文件,注意:Dockerfile文件名区分大小写 文件内容如下 # 基于microsoft/dotnet:la ...
- 使用 vi/vim 时,粘贴进新创建文件或空文件的首行内容丢失的解决方法
只需要进入插入模式后,回车空一行或几行,再粘贴,再把上面的几个空行back回去,就不会丢失首行的内容了.
- C# Language Specification 5.0 (翻译)第六章 转换
转换使表达式可以当做一个明确的类型来加以处理.转换使得所给定类型的表达式以不同类型来处理,或使得没有某个类型的表达式获得该类型.转换可以是显式或隐式的,而这决定了是否需要显式地强制转换.比方说,从类型 ...
- H5——video百花齐放(浏览器自带的播放器)
前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...
- PAT甲题题解-1007. Maximum Subsequence Sum (25)-求最大子区间和
题意:给出n个数,求最大连续的子区间和,并且输出该区间的第一个和最后一个数. 如果所有数都小于0,那么则输出0,第一个数和最后一个数. 看数据k的范围,就知道肯定不能两层for循环来求区间和,O(n^ ...
- SCRUM 12.17
今天,我们的用户统计功能终于上线了!! 大家辛苦工作了许久.我们测试的用户统计功能效果模拟如下 还有一些好消息,比如,我们的应用在小米平台收到了崩溃的反馈报告. 这说明我们留下的一些BUG暴露了出来, ...
- Linux内核设计(第一周)——从汇编语言出发理解计算机工作原理
Linux内核设计(第一周)——从汇编语言出发理解计算机工作原理 计算机工作原理 汇编指令 C语言代码汇编分析 by苏正生 原创作品转载请注明出处 <Linux内核分析>MOOC课程htt ...
- VS2015安装与单元测试
很久之前就听说微软有一款强大的编程软件——Visual Stdio系列,也许是满足于VC和CB的小巧一直都没有去尝试,借这次软件工程的机会终于可以一睹其真容,第一感觉是高大上,一改VC和CB的简洁,看 ...
- VS2013快速安装教程
1.下载vs2013安装镜像.VS2013_RTM_ULT_CHS.iso链接: http://pan.baidu.com/s/1mguOdiK密码: rllz 建议使用百度网盘客户端下载,虽然被人 ...
- vue 跳转路由传参数用法
// 组件 a <template> <button @click="sendParams">传递</button> </template ...