Webpack4 配置 DevServer 本地服务器

2024-08-23 22:08
文章标签 配置 服务器 本地 webpack4 devserver

本文主要是介绍Webpack4 配置 DevServer 本地服务器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前面的已经介绍过如何用webpack 打包一个项目，细心的人会发现，打包后想要项目运行起来必须要把打包后的项目上传到服务器中，或者静态的项目也可以在本地直接用浏览器打开。但在实际开发中可能会需要实时预览界面效果，那么这个时候就需要创建一个本地的HTTP服务器来实现实时预览项目。

然而官方提供的开发工具 DevServer 也可以很方便地做到项目的实时预览, 修改文件后自动刷新，Source Map 和 反向代理等功能。DevServer会启动一个HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览。

DevServer 服务器功能：

  1. 提供 HTTP 服务而不是使用本地文件预览
  2. 支持开发环境http的反向代理
  3. …

Webpack 原生的功能：

  1. 监听文件的变化并自动刷新网页，做到实时预览
  2. 支持 Source Map，以方便调试。
  3. …

简单的使用案例：

webpack.config.js

const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'),},// 这个配置项是属于：DevServer 工具的配置项devServer: {// 1.指定服务的iphost: "localhost",// 2.指定服务的端口port: 9000,// 3.开发环境进行http的代理proxy: {// 匹配 url 路径的开头'/api': {// 1.路劲只要是/api开头的url都代理到下面这个网站。// 例如：fetch('/api/xxxx') 会代理到 https://news-at.zhihu.com/api/xxxx// 例如：fetch('http://localhost:9000/api/xxxx') 这种写法会代理失败target: 'https://news-at.zhihu.com',ws: true, // 2.允许代理 websockets 协议changeOrigin: true //3.需要虚拟托管的站点要设计为true。建议设为 true，开发时大部分情况都是虚拟托管的站点}}}
};

1.安装 DevServer 服务器

DevServer 开发工具的全称是：webpack-dev-server

1.新建一个项目

|-- index.html
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   `-- main.js
`-- webpack.config.js

package.json

{"name": "testdevserver","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"webpack": "^4.35.3","webpack-cli": "^3.3.6","webpack-dev-server": "^3.7.2"}
}

1.安装HTTP服务器开发工具：npm install webpack-dev-server@3.7.2 --save-dev

2.编写启动服务器脚本：

"dev": "webpack-dev-server" 或者 "dev": "webpack-dev-server --hot --devtool source-map"

3.编写项目打包脚本："build": "webpack --mode production"

webpack.config.js

const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'),},devServer: {}
};

common.js

function get(content) {console.log('111')
}// 通过 CommonJS 规范导出 get 函数
module.exports = get;

main.js

// 1.通过 CommonJS 规范导入 get 函数
const get = require('./common.js');
// 2.执行 get 函数
get();

index.html

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--1.导入 Webpack 输出的 JavaScript 文件-->
<!-- <script src="../dist/main.js"></script> --><!--2.导入 DevServer 输出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

2.启动本地HTTP服务

打开终端，在项目的根目录执行：npm run dev 命令, DevServer 就启动了，这时你会看到控制台有一串日志输出：

PS F:\blog\webpack-study\webpackCode\08-配置-devServer> npm run dev> testdevserver@1.0.0 dev F:\blog\webpack-study\webpackCode\08-配置-devServer
> webpack-dev-serveri ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\blog\webpack-study\webpackCode\08-配
[./src/main.js] 89 bytes {main} [built]+ 19 hidden modules........
i ｢wdm｣: Compiled successfully.

这意味着 DevServer 启动的 HTTP 服务器监听在 http://localhost:8080/ ，DevServer 启动后会一直驻留在后台保持运行，访问这个http://localhost:8080/网址你就能获取项目根目录下的 index.html。 用浏览器打开这个地址你会发现页面引用的 bundle.js文件自动输出到了项目的根目录，原因是 DevServer 会把 Webpack 构建出的文件保存在内存中，在要访问输出的文件时，必须通过 HTTP 服务访问。 由于 DevServer 不会理会 webpack.config.js 里配置的 output.path 属性，所以要获取 bundle.js的正确 URL 是 http://localhost:8080/bundle.js，对应的 index.html 应该为：<script src="bundle.js"></script>

2.配置-port和host

https://www.webpackjs.com/configuration/dev-server/#devserver-host

webpack.config.js

const path = require('path');module.exports = {// entry 和 output 是webpack原生配置项entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'),},// devServer 这个是webpack-dev-server的配置项    devServer: {// 1.指定服务的iphost: "localhost",// 2.指定服务的端口port: 9000,}
};

打开终端，在项目的根目录执行：npm run dev 命令, DevServer 就启动了，这时你会看到控制台有一串日志输出：

PS F:\blog\webpack-study\webpackCode\08-配置-devServer> npm run dev> testdevserver@1.0.0 dev F:\blog\webpack-study\webpackCode\08-配置-devServer
> webpack-dev-serveri ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\blog\webpack-study\webpackCode\08-配
[./src/main.js] 89 bytes {main} [built]+ 19 hidden modules........
i ｢wdm｣: Compiled successfully.

2.配置-hot

除了通过重新刷新整个网页来实现实时预览，DevServer 还有一种被称作模块热替换的刷新技术。 模块热替换能做到在不重新加载整个网页的情况下，通过将被更新过的模块替换老的模块，再重新执行一次来实现实时预览。

webpack.config.js

const path = require('path');module.exports = {// entry 和 output 是webpack原生配置项entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'),},// devServer 这个是webpack-dev-server的配置项    devServer: {// 1.指定服务的iphost: "localhost",// 2.指定服务的端口port: 9000,// 3.模块热替换特性hot: true}
};

3.配置-proxy

下面的案例是发起一个ajax请求：https://news-at.zhihu.com/api/4/news/latest 这个接口。如果没有使用代理会出现跨越的问题。那么如何配置开发环境HTTP服务器的代理呢？看下面案例代码：

common.js

function get(content) {// 1.这个写法会devServer代理会失败。（路径不能包含：协议，ip和端口）// 注意：在使用 axios 时，如果开发环境 baseURL 属性的值包含：协议，ip 和 端口，将会代理失败// fetch('http://localhost:9000/api/4/news/latest')//   .then((r)=>{//     console.log('r=',r)//     return r.json()//   })//   .then((res)=>{//     console.log(res)//   })// 2.正确的写法fetch('/api/4/news/latest').then((r)=>{console.log('r=',r)// 从结果提取body中的内容，并转成json格式return r.json()}).then((res)=>{console.log('res=' ,res)})}// 通过 CommonJS 规范导出 get 函数
module.exports = get;

webpack.config.js

const path = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'),},devServer: {// 1.指定服务的iphost: "localhost",// 2.指定服务的端口port: 9000,// 3.开发环境进行http的代理proxy: {// 匹配 url 路径的开头（注意：如果url开头包含http协议和端口会匹配失败，导致代理失败）'/api': {// 1.路劲只要是/api开头的url都代理到下面这个网站。// 例如：fetch('/api/xxxx') 会代理到 https://news-at.zhihu.com/api/xxxx// 例如：fetch('http://localhost:9000/api/xxxx') 这种写法会代理失败target: 'https://news-at.zhihu.com',ws: true, // 2.允许代理 websockets 协议，devserver使用的就是websockets协议changeOrigin: true //3.需要虚拟托管的站点要设计为true。建议设为 true，开发时大部分情况都是虚拟托管的站点}}}
};

注意：如果url开头包含http协议和端口会匹配失败，导致代理失败

结论：

当在webpack.config.js中配置devServer 项时，先要安装webpack-dev-server, DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack，并接收 Webpack 发出的文件更变信号`，通过 WebSocket 协议自动刷新网页做到实时预览。

源码下载

这篇关于Webpack4 配置 DevServer 本地服务器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1100624。

相关文章

SpringBoot多环境配置数据读取方式

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式（传统格式）1.
阅读更多...
Debian系和Redhat系防火墙配置方式

Debian系和Redhat系防火墙配置方式

《Debian系和Redhat系防火墙配置方式》文章对比了Debian系UFW和Redhat系Firewalld防火墙的安装、启用禁用、端口管理、规则查看及注意事项,强调SSH端口需开放、规则持久化,... 目录Debian系UFW防火墙1. 安装2. 启用与禁用3. 基本命令4. 注意事项5. 示例配置R
阅读更多...
Python极速搭建局域网文件共享服务器完整指南

Python极速搭建局域网文件共享服务器完整指南

《Python极速搭建局域网文件共享服务器完整指南》在办公室或家庭局域网中快速共享文件时,许多人会选择第三方工具或云存储服务,但这些方案往往存在隐私泄露风险或需要复杂配置,下面我们就来看看如何使用Py... 目录一、android基础版：HTTP文件共享的魔法命令1. 一行代码启动HTTP服务器2. 关键参
阅读更多...
PyCharm中配置PyQt的实现步骤

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q
阅读更多...
Redis MCP 安装与配置指南

Redis MCP 安装与配置指南

《RedisMCP安装与配置指南》本文将详细介绍如何安装和配置RedisMCP,包括快速启动、源码安装、Docker安装、以及相关的配置参数和环境变量设置,感兴趣的朋友一起看看吧... 目录一、Redis MCP 简介二、安www.chinasem.cn装 Redis MCP 服务2.1 快速启动（推荐）2.
阅读更多...
Spring Boot配置和使用两个数据源的实现步骤

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be
阅读更多...
SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

SpringBoot改造MCP服务器的详细说明(StreamableHTTP 类型)

《SpringBoot改造MCP服务器的详细说明(StreamableHTTP类型)》本文介绍了SpringBoot如何实现MCPStreamableHTTP服务器,并且使用CherryStudio... 目录SpringBoot改造MCP服务器（StreamableHTTP）1 项目说明2 使用说明2.1
阅读更多...
Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals（目标）1.3 插件定位1.4 核
阅读更多...
RabbitMQ消息总线方式刷新配置服务全过程

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中，为了更方便的向微服务实例广播消息，
阅读更多...
nginx 负载均衡配置及如何解决重复登录问题

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一：源码安装：1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2