Webpack配置热更新web服务

Myth丶恋晨 2022-04-06 08:20 307阅读 0赞

### 1、安装插件 ###

npm install webpack-dev-server --save-dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70][]

### 2、package.json中配置script启动脚本 ###

package.json

"scripts": {
        "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"
      },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1][]

inline：自动刷新
    
    --hot：热加载
    
    --port：指定端口
    
    --open：自动在默认浏览器打开
    
    --host：可以指定服务器的 ip，不指定则为127.0.0.1

### 3、运行脚本 ###

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2][]

### 4、测试 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70]: /images/20220406/d57f059189a344ab9e634886eb81507a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 1]: /images/20220406/c94bdcdc1dec4317966bf89c82d6f1b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 2]: /images/20220406/9831bbd7dd684c299f6f78f2690c6c09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzd3F6eA_size_16_color_FFFFFF_t_70 3]: /images/20220406/92e8b56322ad41039175ac8d591d3790.png

发表评论取消回复

表情：

评论列表（有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

相关 Apollo 热更新配置

文章目录前言一、Apollo热更新配置 1. @Value的方式 2. @RefreshScope 3. 监听ap

矫情吗；*/ 2024年04月06日 12:04/ 0 赞/ 78 阅读

相关 webpack实现热更新

昨天看到公司有前端同事在研究`webpack`，今天有空正好找下资料也`look look` 我最早接触`webpack`是2019年6月-7月之间，当时对前端还是很模糊的，

r囧r小猫/ 2022年10月11日 14:00/ 0 赞/ 276 阅读

相关 Webpack 热更新HMR 原理全解析

> 这是 Webpack 原理分析系列第十篇文章，前文可到公众号【Tecvan】查阅。一、什么是 HMR HMR 全称 Hot Module Replacement，

Dear 丶/ 2022年09月17日 03:26/ 0 赞/ 230 阅读

相关 JS-Webpack以及热更新

HMR（Hot Module Replacement）热更新使得应用在运行状态下，不重载刷新就能更新、增加、移除模块的机制 EventSource 服务端与客户端通信

野性酷女/ 2022年09月15日 15:52/ 0 赞/ 182 阅读

相关【Webpack】1047- 轻松理解webpack热更新原理

![7fae829b31a9702772b7795b5ff2e9d3.png][] 一、前言 - webpack热更新 > `Hot Module Replacemen

痛定思痛。/ 2022年09月04日 10:40/ 0 赞/ 236 阅读

相关 webpack 热更新（实施同步刷新）

解决方案一： -------------------- 实现热更新，首先，安装一系列的node命令，如果嫌麻烦，你可以直接看解决方案二，相对来说比较简单。 1、we

短命女/ 2022年07月13日 11:28/ 0 赞/ 214 阅读

相关 webpack-dev-server 热更新配置

vue+webpack 前端开发中，有时运行npm run dev不能自动热更新，查了一下，终于解决了，主要原因还是对webpack不了解。问题描述： 1.npm run

你的名字/ 2022年06月01日 00:53/ 0 赞/ 565 阅读

相关 webpack 配置热更新 webpack-dev-server 设置 less 环境-------- 的感悟

不是配置相关的文章，仅仅是个人感悟； \-------------------------------------------------------------------

小咪咪/ 2022年05月26日 05:19/ 0 赞/ 165 阅读

相关 Webpack配置热更新web服务

1、安装插件 npm install webpack-dev-server --save-dev ![watermark_type_ZmFuZ3poZW5naG

Myth丶恋晨/ 2022年04月06日 08:20/ 0 赞/ 308 阅读

相关关于配置webpack-dev-server(热更新)

大纲过程 1.先编写devServer配置 2.然后安装如下包 3.运行npx webpack-dev-server 就出

深碍√TFBOYSˉ_/ 2021年07月24日 16:15/ 0 赞/ 504 阅读