webpack+express实现“热更新”和“热加载”

“热更新”:对应的是 ‘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‘
    }
  },
  module:{
    loaders:[
      {
        test: /\.js$/,
        loader: ‘babel-loader?presets=env‘,
        include: path.resolve(__dirname,‘src‘)
      },{
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        include: path.resolve(__dirname,‘src‘)
      }
    ]
  }
}

值得注意的是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那些文件,你就会发现编译的代码自动刷新了~~

原文地址:https://www.cnblogs.com/amiezhang/p/8303794.html

时间: 2024-10-08 23:21:49

webpack+express实现“热更新”和“热加载”的相关文章

Unity3d热更新全书-资源加载(一)从AssetBundle说起

Unity3D动态下载资源,有没有解?有,AssetBundle就是通用解,任何一本书都会花大幅篇章来介绍AssetBundle. 我们也来说说AssetBundle 我们试全面的分析一下Unity3D提供的资源加载机制 1.Resources//内嵌资源,使用方法Resources.Load,可以加载任意种类的资源,不能动态修改,卒. 2.StreamingAssets//随包资源,使用方法IO或WWW.Load.WWW.Load可以加载任意种类资源,IO仅限bytes 和 text. 3.W

热更新和热修复 个人小结

热修复和热更新 1 热更新和热修复:在线修复程序的 BUG 2 JSPach 的使用原理: OC 是一门动态运行时的语言,方法的运行和对象的创建是在运行时中创建的.JSPatch 正的用运行时,通过JavaScriptCore.framework作为 JS引擎,从 JS 动态调用方法和对象到OC 中,再作用NSInvocation动态调用对应的方法.例 Class class = NSClassFromString(@"UIViewController"); id controller

vue使用ECharts时的异步更新与数据加载

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco

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

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:到目前为止,我们的项目已经具备了PC客户端该有的一些基础功能和调试环境,但是总感觉缺了灵魂,那就是结合实际项目.实际业务的细节处理,缺着吧...这篇文章就介绍一下预加载和自动更新,文字功底有限,如有介绍的不清楚的地方,欢迎留言

webpack css模块化和ant-design按需加载冲突

其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无奈,又只好啃回官方文档,我的解决方式如下 webpack正常打包的话,所有的css都会被打包在一起,造成css的全局污染,我们可以采用模块化的方式,其实就是借用hash改变类或id名 webpack.config.js module: { rules: [ { test: /\.(js|jsx)$/

转:C# 通过委托更新UI(异步加载)

来自:http://blog.csdn.net/gongzhe2011/article/details/27351853 using System.Windows.Forms; using System.Threading; using System; namespace Threaddemo1 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } delegate void aa(stri

Unity3D热更新全书-PageZero

由于深刻的认识到自己是个思维跳跃的人,深入浅出是个我还要努力很久的目标,为了让大家不至于在我乱七八糟的文字中迷失,特整理目录一份 无分类 <Unity3D热更新全书-何谓热更新,为何热更新,如何热更新> 这一篇是写给对热更新完全没概念的人 下载系列 还没写 加载系列 <Unity3d热更新全书-资源加载(一)从AssetBundle说起 > 这一篇是探讨使用AssetBundle来做资源更新的问题,希望能让更多人理解AssetBundle是有害的 脚本系列 <Unity3D热

webpack热更新问题和antd design字体图标库扩展

附一张上周末参加jsconf的照片..... 标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后开发的 时候能烂熟于心. 本次分享两个干货,正文从这里开始: 1.很多同学在开发项目前端项目的时候会遇到一个比较影响开发体验的事情,就是在更新样式文件的时候,页面不会热更新.当然前提是在webpack配置项里用了 'extract-text-webpac

【原】Android热更新开源项目Tinker源码解析系列之三:so热更新

本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 Android热更新开源项目Tinker源码解析系类之三:so文件热更新 转载请标明本文来源:http://www.cnblogs.com/yyangblog/p/6252855.html更多内容欢迎star作者的github:https://github.com/LaurenceYang/artic