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。

相关文章

mybatis映射器配置小结

mybatis映射器配置小结

《mybatis映射器配置小结》本文详解MyBatis映射器配置,重点讲解字段映射的三种解决方案（别名、自动驼峰映射、resultMap）,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定... 目录select中字段的映射问题使用SQL语句中的别名功能使用mapUnderscoreToCame
阅读更多...
Linux下MySQL数据库定时备份脚本与Crontab配置教学

Linux下MySQL数据库定时备份脚本与Crontab配置教学

《Linux下MySQL数据库定时备份脚本与Crontab配置教学》在生产环境中,数据库是核心资产之一,定期备份数据库可以有效防止意外数据丢失,本文将分享一份MySQL定时备份脚本,并讲解如何通过cr... 目录备份脚本详解脚本功能说明授权与可执行权限使用 Crontab 定时执行编辑 Crontab添加定
阅读更多...
Java使用jar命令配置服务器端口的完整指南

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java
阅读更多...
SpringBoot 多环境开发实战(从配置、管理与控制)

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础（单文件 YAML 版）（一）配置原理与优势（二）实操示例二、多环境开发多文件版
阅读更多...
Vite 打包目录结构自定义配置小结

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明（1）js 资源分离（2）非 JS 资
阅读更多...
MySQL8 密码强度评估与配置详解

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略（长度8、含数字/字母/特殊字符）,支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件：validate_password2.密码策略级
阅读更多...
ShardingProxy读写分离之原理、配置与实践过程

ShardingProxy读写分离之原理、配置与实践过程

《ShardingProxy读写分离之原理、配置与实践过程》ShardingProxy是ApacheShardingSphere的数据库中间件,通过三层架构实现读写分离,解决高并发场景下数据库性能瓶... 目录一、ShardingProxy技术定位与读写分离核心价值1.1 技术定位1.2 读写分离核心价值二
阅读更多...
QT Creator配置Kit的实现示例

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景：qt5.12.12+vs2022一、症状：二、原因：(可以跳过，直奔后面的解决方法)三、解决方
阅读更多...
SpringBoot路径映射配置的实现步骤

SpringBoot路径映射配置的实现步骤

《SpringBoot路径映射配置的实现步骤》本文介绍了如何在SpringBoot项目中配置路径映射,使得除static目录外的资源可被访问,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一... 目录SpringBoot路径映射补：springboot 配置虚拟路径映射 @RequestMapp
阅读更多...
Web服务器-Nginx-高并发问题

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2