当前位置：首页 > news >正文

Webpack搭建本地服务器

news 来源：原创 2025/6/6 19:33:57

开启本地服务器

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

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

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

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

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

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

Webpack watch mode

Webpack-dev-server（常用）

Webpack-dev-middleware

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

{"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的配置：

devServer:{hot:true
},

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

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')

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')