Webpack搭建本地服务器

开启本地服务器

为什么我们要搭建一个本地服务器呢？
我们目前开发的代码为了运行主要有两个操纵：
   一：npm run build 编译干系的代码
  二：通过live server或者直接通过浏览器打开index.html代码查看效果
  但是这个操纵影响我们的开发效率，我们盼望的是当文件发生变革时可以自动完成编译和展示
为了完成自动编译，Webpack提供了几种可选的方式：
   Webpack watch mode
  Webpack-dev-server（常用）
  Webpack-dev-middleware
  安装完webpack-dev-server之后就可以利用它了：

1. {
2.   "name": "webpack-image",
3.   "version": "1.0.0",
4.   "main": "index.js",
5.   "scripts": {
6.     "test": "echo "Error: no test specified" && exit 1",
7.     "build": "webpack --config wk.config.js",
8.     "serve": "webpack serve --config wk.config.js"
9.   },
10.   "author": "",
11.   "license": "ISC",
12.   "description": "",
13.   "devDependencies": {
14.     "@babel/core": "^7.27.4",
15.     "@babel/preset-env": "^7.27.2",
16.     "babel-loader": "^10.0.0",
17.     "clean-webpack-plugin": "^4.0.0",
18.     "css-loader": "^7.1.2",
19.     "file-loader": "^6.2.0",
20.     "html-webpack-plugin": "^5.6.3",
21.     "less-loader": "^12.3.0",
22.     "postcss-loader": "^8.1.1",
23.     "style-loader": "^4.0.0",
24.     "url-loader": "^4.1.1",
25.     "vue-loader": "^17.4.2",
26.     "webpack-cli": "^6.0.1",
27.     "webpack-dev-server": "^5.2.2"
28.   },
29.   "dependencies": {
30.     "vue": "^3.5.16"
31.   }
32. }

复制代码

 
已经搭建完了

HMR热模块更换

当我们更改一部分代码时，浏览器全部的内容都会举行刷新，可是这个操纵是没须要的，因为哪里变了刷新哪里就好了
什么是HMR呢？
HMR的全称是Hot Module Replacement（模块热更换）
模块热更换指在应用步调运行过程中，更换添加删除模块，无需重新刷新整个页面
HMR通过下面的方式来进步开发的速率：
   不重新加载整个页面，可以保留某些应用步调的状态不丢失
  只更新需要变革的内容节省开发时间
  修改了css、js源代码会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式
  那么怎么开启HMR呢？
我们需要修改webpack的设置：

1. devServer:{
2.     hot:true
3. },

复制代码

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

1. import { createApp } from 'vue'
2. import Hello from './vue_demo/Hello.vue'
4. //需要指定哪一个模块需要HMR
5. if(module.hot){
6.     module.hot.accept("./utils/math.js")
7. }
9. createApp(Hello).mount('#app')

复制代码

1. import { createApp } from 'vue'
2. import Hello from './vue_demo/Hello.vue'
3. import "./utils/demo.js"
5. //需要指定哪一个模块需要HMR
6. if(module.hot){
7.     module.hot.accept("./utils/demo.js",()=>{
8.         console.log("demo.js文件更新了")
9.     })
10. }
12. 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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告