webpack4--热更新
所谓热更新,就是在浏览器能同步刷新你的代码。webpack 热更新依赖 webpack-dev-server。具体实现步骤如下:
1.局部安装依赖 webpack-dev-server
npm install --save-dev webpack-dev-server
2.在 webpack.config.js 配置相关参数
const path = require('path'); //引入path
module.exports = {
mode: 'development',
entry: {
index: path.join(__dirname, 'src/index.js'),
signup:path.join(__dirname, 'src/signup.js'),
}, output: {
//webpack4中的path默认值即为'./dist',可不用设置
path:path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
}, devServer: {
contentBase: path.join(__dirname, 'page'),
compress: true,
port: 8084
}
}
更多的配置可查看:https://webpack.js.org/configuration/dev-server/
3.在package.json中的scripts对象中添加如下命令,用以开启本地服务器:
"server": "webpack-dev-server --open"
4.执行 npm run server,安装了淘宝镜像就执行 cnpm run server
成功的话,终端显示如下图:
此时我们可以看到浏览器会自动打开 http://localhost:8084/
如果你想查看本地服务器下面的文件路径,可以访问http://localhost:8084/webpack-dev-server
我的就显示如下图:
此时你更改你项目里面的文件,刷新浏览器,可以实时看到你修改后的内容了。
webpack4--热更新的更多相关文章
- webpack4.0(二)--热更新
webpack4.0---热更新 使用webpack可帮助我们的开发以及打包,在开发过程中,有时候我们只修改了部分代码并想不必刷新整个页面即可看到更改后的效果,这时候 webpack-dev-serv ...
- 搭建带热更新功能的本地开发node server
引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...
- Webpack 多html入口、devServer、热更新配置
一.clean-webpack-plugin: 在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦) 1.安装clean-webpack-plugin npm/cnpm i c ...
- 【原】Android热更新开源项目Tinker源码解析系列之三:so热更新
本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...
- 【原】Android热更新开源项目Tinker源码解析系列之一:Dex热更新
[原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...
- 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新
上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...
- iOS热更新-8种实现方式
一.JSPatch 热更新时,从服务器拉去js脚本.理论上可以修改和新建所有的模块,但是不建议这样做. 建议 用来做紧急的小需求和 修复严重的线上bug. 二.lua脚本 比如: wax.热更新时,从 ...
- 【.net 深呼吸】程序集的热更新
当一个程序集被加载使用的时候,出于数据的完整性和安全性考虑,程序集文件(在99.9998%的情况下是.dll文件)会被锁定,如果此时你想更新程序集(实际上是替换dll文件),是不可以操作的,这时你得把 ...
- 谁偷了我的热更新?Mono,JIT,iOS
前言 由于匹夫本人是做游戏开发工作的,所以平时也会加一些玩家的群.而一些困扰玩家的问题,同样也困扰着我们这些手机游戏开发者.这不最近匹夫看自己加的一些群,常常会有人问为啥这个游戏一更新就要重新下载,而 ...
- ReactNative 告别CodePush,自建热更新版本升级环境
微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...
随机推荐
- 复习下C 链表操作(双向链表)
双向链表 创建.删除.反转.插入 //struct #include <stdio.h> #include <stdlib.h> #include <string.h&g ...
- Java:集合,对列表(List)中的自定义对象按属性(字段)排序(正序、倒序)的方法
1. 要求 对列表(List)中的自定义对象,要求能够按照对象的属性(字段)进行排序(正序.倒序). 如:用户对象(Member)有用户名(username).级别(level).出生日期(birth ...
- Android基础知识之API等级介绍
原文:http://android.eoe.cn/topic/android_sdk :可以让开发者通过一个表示API级别的整数来描述程序在android平台上的兼容性,系统会将与系统本身提供的API ...
- Lua中and、or的一些特殊使用方法
Lua中的逻辑运算符:与(and).或(or)和非(not),与其它语言的逻辑运算符功能一致,这里不做赘述.仅仅说一点,全部的逻辑运算符将false和nil视为假,其它不论什么东西视为真.0也视为真. ...
- Eclipse 不能build, pom文件上面有叉叉 解决办法
Error message: [html] view plaincopy execution not covered by lifecycle configuration: org.apache. ...
- bitcoin双花
https://en.bitcoin.it/wiki/Irreversible_Transactions https://www.reddit.com/r/Bitcoin/comments/2e7bf ...
- [Windows Azure] How to use the Table Storage Service
How to use the Table Storage Service version 1.7 version 2.0 This guide will show you how to perform ...
- 使用Maven对JAVA程序打包-带主类、带依赖【转】
很多时候,我们需要对编写的程序进行打包,这个时候,我们可以借助一些项目构建工具,如maven, sbt, ant等,这里我使用的是maven. 打包成可执行有主类的jar包(jar包中无依赖) 以下是 ...
- Docker 构建网络服务后本机不能访问
Docker 构建网络服务后本机不能访问 起因 使用tornado构建了一个服务,测试都没有问题 使用docker构建镜像,使用docker run image_name启动服务 使用浏览器访问 12 ...
- 双重检验的单例模式,为什么要用volatile关键字
双重检验的单例模式是比较推荐的单例写法,在该代码中的单例对象的是用volatile关键字修饰的.这时就产生的一个疑问,为什么需要volatile来修饰呢?上网查看多个博客,下面简单通俗分析一下当中的原 ...