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

相关推荐
小杨同学yx1 小时前
前端三剑客之Css---day3
前端·css
Mintopia2 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九3 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia3 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
c_zyer3 小时前
Mermaid流程图可视化系统:基于Spring Boot与Node.js的三层架构实现
spring boot·node.js·流程图·mermaid
wb1894 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴4 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee4 小时前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin5 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw56 小时前
免费的个人网站托管-Cloudflare
服务器·前端