“热更新”:对应的是 '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以前的做法)的更多相关文章

  1. 【Quick 3.3】资源脚本加密及热更新(三)热更新模块

    [Quick 3.3]资源脚本加密及热更新(三)热更新模块 注:本文基于Quick-cocos2dx-3.3版本编写 一.介绍 lua相对于c++开发的优点之一是代码可以在运行的时候才加载,基于此我们 ...

  2. 结合webpack 一步一步实现懒加载的国际化简易版方案

    想法来源于工作需求,最后倒腾出一个国际化工作流,期望是这样的: 1. 自动化处理国际化文案(表现为转义翻译人员给到的文件处理成技术人员所识别的文件) 2. 转化后的国际化文件能够按需加载,实现懒加载的 ...

  3. webpack实现“热更新”和“热加载”(webpack3.6新增)

    之前的博文有提到怎么样去实现热更新,但是居然要用到另外一个node框架(express)而且新增了一个入口(entry)两个插件(plugin)来实现,大大提高了配置的复杂度,这样其实对使用webpa ...

  4. 热更新应用--热补丁Hotfix学习笔记

    一.热补丁简介 热补丁主要是用于将纯C#工程在不重做的情况下通过打补丁的形式改造成具备lua热更新功能工程,主要是让原来脚本中Start函数和Update函数等函数代码块重定向到lua代码. 二.第一 ...

  5. Android热修复(动态加载)方案汇总

    整理了以下动态加载的方案,便于在项目中使用时查阅: Dexposed github (https://github.com/alibaba/dexposed) AndFix github (https ...

  6. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  7. 在webpack自定义配置antd的按需加载和修改主题色

    最近使用antd来做react项目的UI.从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下: (1)添加模块 react-app-rewired, babel-plug ...

  8. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  9. webpack:代码分割与按需加载

    代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...

随机推荐

  1. 【第十二课】FTP服务

    目录 FTP服务 1.Linux下部署pure-ftpd 2.FTP的主动和被动模式 2.1.什么是主动FTP 2.2.什么是被动FTP 2.3.主动模式ftp与被动模式FTP优点和缺点: FTP服务 ...

  2. libgdx学习记录23——图片移动选择

    模拟移动选择图片,采用相机实现. package com.fxb.newtest; import com.badlogic.gdx.ApplicationAdapter; import com.bad ...

  3. libgdx学习记录5——演员Actor

    Actor也是libgdx中非常重要的一个元素,一般与stage配合一起使用.Actor能够设置大小,位置,旋转和动画等. 我们自定义的Actor一般需要继承于Actor,并且重写其中的act和dra ...

  4. 【ORACLE】Win2008R2修改oracle数据库实例名

    需求说明:要求将windows平台的数据库实例名由orcl改为haha 参考: https://www.cnblogs.com/junnor/archive/2013/03/05/2945245.ht ...

  5. 起步 - vue-router路由与页面间导航

    vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...

  6. CSS 天坑 I - 字体单位

    首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不 ...

  7. [Unity]制作游戏中名字板的过程记录

    先大概说一下需求: 1 每个模型上都要有名字板:人.怪.npc等等. 2 名字板上会显示:名字(文字).血条(图片)等 3 因为是透视相机,名字板离得太近会变得超大,且主角移动,名字板的位置相对于相机 ...

  8. Linux内核分析第五章读书笔记

    第五章 系统调用 在操作系统中,内核提供了用户进程与内核进行交互的一组接口,这些接口在应用程序和内核之间扮演了使者的角色,保证系统稳定可靠,避免应用程序肆意妄行. 5.1 与内核通信 系统调用在用户空 ...

  9. 《Linux内核分析》 第二节 操作系统是如何工作的

    Linux内核分析 第二周 操作系统是如何工作的 张嘉琪 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/UST ...

  10. mysql左外连接

    左外连接的概念性不说了,这次就说一说两个表之间的查询步骤是怎么样的? 例如 SELECT ut.id,ut.name,ut.age, ut.sex,ut.status,st.score,st.subj ...