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。

相关文章

JavaWeb-WebSocket浏览器服务器双向通信方式

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏
阅读更多...
配置springboot项目动静分离打包分离lib方式

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下，
阅读更多...
一文教你使用Python实现本地分页

一文教你使用Python实现本地分页

《一文教你使用Python实现本地分页》这篇文章主要为大家详细介绍了Python如何实现本地分页的算法,主要针对二级数据结构,文中的示例代码简洁易懂,有需要的小伙伴可以了解下... 在项目开发的过程中，遇到分页的第一页就展示大量的数据，导致前端列表加载展示的速度慢，所以需要在本地加入分页处理，把所有数据先放
阅读更多...
查询SQL Server数据库服务器IP地址的多种有效方法

查询SQL Server数据库服务器IP地址的多种有效方法

《查询SQLServer数据库服务器IP地址的多种有效方法》作为数据库管理员或开发人员,了解如何查询SQLServer数据库服务器的IP地址是一项重要技能,本文将介绍几种简单而有效的方法,帮助你轻松... 目录使用T-SQL查询方法1：使用系统函数方法2：使用系统视图使用SQL Server Configu
阅读更多...
本地搭建DeepSeek-R1、WebUI的完整过程及访问

本地搭建DeepSeek-R1、WebUI的完整过程及访问

《本地搭建DeepSeek-R1、WebUI的完整过程及访问》：本文主要介绍本地搭建DeepSeek-R1、WebUI的完整过程及访问的相关资料,DeepSeek-R1是一个开源的人工智能平台,主... 目录背景       搭建准备基础概念搭建过程访问对话测试总结背景       最近几年，人工智能技术
阅读更多...
如何在本地部署 DeepSeek Janus Pro 文生图大模型

如何在本地部署 DeepSeek Janus Pro 文生图大模型

《如何在本地部署DeepSeekJanusPro文生图大模型》DeepSeekJanusPro模型在本地成功部署,支持图片理解和文生图功能,通过Gradio界面进行交互,展示了其强大的多模态处... 目录什么是 Janus Pro1. 安装 conda2. 创建 python 虚拟环境3. 克隆 janus
阅读更多...
本地私有化部署DeepSeek模型的详细教程

本地私有化部署DeepSeek模型的详细教程

《本地私有化部署DeepSeek模型的详细教程》DeepSeek模型是一种强大的语言模型,本地私有化部署可以让用户在自己的环境中安全、高效地使用该模型,避免数据传输到外部带来的安全风险,同时也能根据自... 目录一、引言二、环境准备（一）硬件要求（二）软件要求（三）创建虚拟环境三、安装依赖库四、获取 Dee
阅读更多...
deepseek本地部署使用步骤详解

deepseek本地部署使用步骤详解

《deepseek本地部署使用步骤详解》DeepSeek是一个开源的深度学习模型,支持自然语言处理和推荐系统,本地部署步骤包括克隆仓库、创建虚拟环境、安装依赖、配置模型和数据、启动服务、调试与优化以及... 目录环境要求部署步骤1. 克隆 DeepSeek 仓库2. 创建虚拟环境3. 安装依赖4. 配置模型
阅读更多...
nginx-rtmp-module构建流媒体直播服务器实战指南

nginx-rtmp-module构建流媒体直播服务器实战指南

《nginx-rtmp-module构建流媒体直播服务器实战指南》本文主要介绍了nginx-rtmp-module构建流媒体直播服务器实战指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. RTMP协议介绍与应用RTMP协议的原理RTMP协议的应用RTMP与现代流媒体技术的关系2
阅读更多...
DeepSeek模型本地部署的详细教程

DeepSeek模型本地部署的详细教程

《DeepSeek模型本地部署的详细教程》DeepSeek作为一款开源且性能强大的大语言模型,提供了灵活的本地部署方案,让用户能够在本地环境中高效运行模型,同时保护数据隐私,在本地成功部署DeepSe... 目录一、环境准备（一）硬件需求（二）软件依赖二、安装Ollama三、下载并部署DeepSeek模型选
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2