Webpack搭建本地服务器

开启本地服务器

为什么我们要搭建一个本地服务器呢？

我们目前开发的代码为了运行主要有两个操作：

一：npm run build 编译相关的代码

二：通过live server或者直接通过浏览器打开index.html代码查看效果

但是这个操作影响我们的开发效率，我们希望的是当文件发生变化时可以自动完成编译和展示

为了完成自动编译，Webpack提供了几种可选的方式：

Webpack watch mode

Webpack-dev-server（常用）

Webpack-dev-middleware

安装完webpack-dev-server之后就可以使用它了：

javascript 复制代码

{
  "name": "webpack-image",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config wk.config.js",
    "serve": "webpack serve --config wk.config.js"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.27.4",
    "@babel/preset-env": "^7.27.2",
    "babel-loader": "^10.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.3",
    "less-loader": "^12.3.0",
    "postcss-loader": "^8.1.1",
    "style-loader": "^4.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.4.2",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.2"
  },
  "dependencies": {
    "vue": "^3.5.16"
  }
}

已经搭建完了

HMR热模块替换

当我们更改一部分代码时，浏览器全部的内容都会进行刷新，可是这个操作是没必要的，因为哪里变了刷新哪里就好了

什么是HMR呢？

HMR的全称是Hot Module Replacement（模块热替换）

模块热替换指在应用程序运行过程中，替换添加删除模块，无需重新刷新整个页面

HMR通过下面的方式来提高开发的速度：

不重新加载整个页面，可以保留某些应用程序的状态不丢失

只更新需要变化的内容节省开发时间

修改了css、js源代码会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式

那么怎么开启HMR呢？

我们需要修改webpack的配置：

javascript 复制代码

devServer:{
    hot:true
},

修改这个还不够，我们需要去指定哪些模块更新的时候进行HMR

javascript 复制代码

import { createApp } from 'vue'
import Hello from './vue_demo/Hello.vue'

//需要指定哪一个模块需要HMR
if(module.hot){
    module.hot.accept("./utils/math.js")
}

createApp(Hello).mount('#app')

javascript 复制代码

import { createApp } from 'vue'
import Hello from './vue_demo/Hello.vue'
import "./utils/demo.js"

//需要指定哪一个模块需要HMR
if(module.hot){
    module.hot.accept("./utils/demo.js",()=>{
        console.log("demo.js文件更新了")
    })
}

createApp(Hello).mount('#app')

框架的HMR

有一个问题是：在开发其他项目时，我们是否需要经常手动写入module.hot.accpet相关的API

开发Vue和React项目我们修改了组件希望进行热更新，这个时候应该如何操作呢？

我们不需要每一次都手动的进行操作，社区中已经提供了很成熟的解决方案：

vue开发中我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验

react开发中有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成了react-refresh）

host配置

刚才开启的服务仅限于开启了，并没有进行相关的配置

我们是可以通过配置改变运行服务的端口号等东西的

我们可以改的比较常用的东西：

host设置主机地址：

默认为localhost

如果希望其他地方也可以访问则可以设置为0.0.0.0

localhost和0.0.0.0是有本质区别的：

open控制浏览器是否自动打开

compress是否为静态文件开启gzip compression

（是否对文件进行压缩）

默认值是false，可以设置为true