使用webpack-dev-server搭建本地服务器

最新推荐文章于 2025-07-08 22:57:49 发布
最新推荐文章于 2025-07-08 22:57:49 发布
阅读量693 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43974265/article/details/112722600
本文介绍了如何使用webpack-dev-server搭建本地开发服务器，包括安装、配置和使用步骤。配置内容包括contentBase、port、inline和historyApiFallback等选项。在遇到命令行找不到webpack-dev-server命令的问题时，提供了在package.json的scripts中添加命令或使用npx的解决方案。注意，webpack-dev-server将编译后的文件保存在内存中，因此即使没有dist文件夹也能正常运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webpack提供了一个可选的本地开发服务器 webpack-dev-server，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

第一步：安装

它是一个单独的模块，在使用之前需要先安装它。

安装：npm install --save-dev webpack-dev-server@2.9.0

我使用的webpack版本是3.6.0，webpack-dev-server的版本是2.9.0

第二步：配置

安装好之后我们需要在webpack.config.js文件中添加 dev-server 进行配置。

选项本身可以设置如下属性：

  • contentBase：为哪一个文件夹提供本地服务，这里我填写./dist
  • port：端口号，默认为8080
  • inline：控制页面是否实时刷新。取值为true或false，当为true时，修改了代码后页面会自动刷新
  • historyApiFallback：在SPA页面中，依赖HTML5的history模式
// webpack.config.js
//...

module.exports =
最低0.47元/天 解锁文章

200万优质内容无限畅学
webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08
钢铁直女
05-06 1323
webpack-dev-server搭建本地服务器webpack-dev-server搭建本地服务器，开发阶段使用1、安装webpack-dev-server（开发时依赖）2、在webpack.config.js文件中配置devServer3、运行启动解决webpack-cli、webpack-dev-server版本不兼容报错： webpack-dev-server搭建本地服务器，开发阶段使用 webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server
2401_84619530的博客
05-08 1347
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记Vue 学习笔记。
webpack---devServer
weixin_43390711的博客
05-18 265
devServer: { // 指定运行代码的目录，一般也是所有资源的输出目录 contentBase: resolve(__dirname, 'dist'), // 监视contentBase目录下所有文件，一旦发生变化就reload watchContentBase: true, watchOptions: { // 让监视更高效 ignored: /node_modules/ }, // 启动gzip压缩 .
webpack 执行 npx webpack-dev-server 报错 static heartbeatInterval = 1000
m0_58893670的博客
03-09 173
使用 npx webpack-dev-server打包的时候报错 最后发现是因为我安装的node版本 过低 解决方法： 安装高版本node webpack-dev-server v4.0.0+ 要求 node版本必须 >= v12.13.0，webpack >= v4.37.0 ...
Webpack Dev Server
最新发布
D_xw_的博客
07-08 1639
 Webpack Dev Server 是 Webpack 提供的一个开发辅助工具，主要功能是通过本地服务器实时刷新页面。
想了解Webpack，看这篇就够了
华为云官方博客
10-28 1985
摘要：Webpack是一种前端资源构建工具，一个静态模块打包器。 1. 摘要 Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。 图1-1 Webpack打包流程图 2. Webpack五个核心概念 2.1 Entry 入口(Entry)指示Webp
Webpack——05——使用开发服务器devServer
x1037490413的博客
11-27 517
我们用原来的代码举例，打包其他资源里的代码 当我们打包好之后，build文件夹里生成了index.html文件，但是我们想修改代码，但是显示不出来，运行看到的东西还是之前构建的，重新打包终端输入webpack才行，这样重复打包的过程很麻烦，devServer就是自动帮我们打包的工具，那么如何配置呢？ 开发服务器devServer:用来自动化（自动编译，自动打开浏览器，自动刷新浏览器） 特点：只会在内存中编译打包，不会有任何输出 启动devServer指令为：npx webpack-dev-server(这个
npx webpack-dev-server, module not found
weixin_43814775的博客
10-22 1699
想看Stack Overflow的话：链接 webpack-dev-server 当在Terminal运行 npx webpack-dev-server的时候出现这种Error！ Error: Cannot find module 'webpack-cli/bin/config/config-yargs' Require stack: - D:\webpack workspace\test5\node_modules\webpack-dev-server\bin\webpack-dev-s
使用webpack3.0配置webpack-dev-server教程
08-27
在devServer中，我们可以使用hot属性来启用热模块替换特性，但是需要使用webpack.HotModuleReplacementPlugin插件。下面是一个基本的配置示例： ``` const path = require("path"); const webpack = require(...
webpack（10）webpack-dev-server搭建本地服务器
厦门在乎科技
07-13 358
前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果 由于它是个单独的模块，使用之前，我们需要先安装，命令如下： npm install -D
webpack，vite 配vue 框架 petite vue，npx,--watch自动构建，webpack-dev-server自动刷新浏览器显示改动内容，loader，动态导入（预加载/预获取）
差不少的博客
08-08 1065
webpack，vite 配vue 框架 petite vue，npx,--watch自动构建，webpack-dev-server自动刷新浏览器显示改动内容，loader，动态导入（预加载/预获取）
【webpack】DevServer运行时webpack-dev-server插件报错：Cannot find module ‘webpack-cli/bin/config-yargs
这道题我不会做...不会做啊..太难了！！
05-13 507
文章目录前言原因解决方法 前言 使用webpack的开发服务器(DevServer)进行热部署时，运行npx webpack-dev-server命令时，运行报错了 原因 本地默认安装的新版webpack5与相关协作的功能包并不兼容 解决方法 因为不想回退webpack版本，所以就查阅官方文档，发现最新的运行命令为：npx webpack serve ...
Vue-node运行报错--- @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
热门推荐
weixin_45605654的博客
07-31 1万+
Vue-node运行报错— @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 如果说不是软件安装错误，之前项目可以运行，然而这次报错，运行报错和运行界面是 @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/ho
【webpack扩展】- 2、开发服务器webpack-dev-server
充电五分钟...
06-28 553
文章目录关于webpack-dev-serverwebpack-dev-server 原理配置 关于webpack-dev-server 在**开发阶段**，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：1. 编写代码 --> 2. 控制台运行命令npx webpack完成打包 --> 3. 打开页面查看效果 – >4. 继续编写代码，回到步骤2 并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境 为了解决这些问题，webpack官方制作了
webpack --- webpack和webpack-dev-server众问题
bylifan的博客
08-13 1922
报错信息： peerDependencies WARNING webpack-dev-server@^2.9.7 requires a peer of webpack@^2.2.0 || ^3.0.0 but webpack@4.39.1 was installed peerDependencies WARNING webpack-dev-server@2.11.5 › webpack-dev...
webpack(二)---devServer---自动化
qq_42855675的博客
02-10 136
文章目录devServer作用是什么特点配置启动devServer的指令自动打开浏览器--默认浏览器webpack 和npx webpack-dev-server的区别 devServer作用是什么         用于自动化（自动编译、自动打开浏览器、自动刷新浏览器） 特点         只会在内存中编译打包，不会有任何输出 配置 启动devS
webpack
GQDD99的博客
12-26 252
构建打包
Webpack devServer 配置及开发环境的配置
专注前端技术，包括Web端、移动端、小程序、APP
06-20 1959
在前面讲过的webpack的简单使用中已经完成了webpack的基本配置，在你完成代码的编写之后，在命令行执行webpack命令打包即可。但是这种方式会比较麻烦，你在开发过程中需要多次进行调试，每次写完代码都需要进行打包就有些浪费时间了，所以我们可以进行配置热编译——devServer的配置。 在你的webpack.config.js文件中，引入下面的配置，接着在控制台进行安装webpack-dev-server ： 安装命令： npm i webpack-dev-server -D 启动devServe
Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能
꧁༺ʚvv༒catɞ༻꧂的博客
07-31 1876
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块 使用 cnpm 命令 cnpm i webpack-dev-server -D 安装 webpack-dev-server 把这个工具安装到项目的本地开发依赖，这个 工具的用法 和 webpack 命令的用法，完全一样。由于，我们是在项目中，本地安装的 webpack-dev-server , 所以，无法把它当做 脚本命令，在powershell 终端中直接
cnpm i webpack webpack-cli webpack-dev-server -g
05-20
### 使用 `cnpm` 全局安装 Webpack、Webpack-CLI 和 Webpack-Dev-Server 的含义及用途 #### 一. 基础概念解释 1. **Webpack**: 这是一款功能强大的前端静态资源打包工具，主要用于将多个模块化文件组合成一个或几个最终产物。它支持复杂的依赖树分析以及多种类型的资产（JavaScript, CSS, 图片等），并通过插件机制扩展其能力[^1]。 2. **Webpack-CLI**: 提供命令行接口给 Webpack 使用，使开发者能够在终端中轻松地运行 Webpack 并传递参数选项。它是执行实际编译过程的关键部分，即使已安装 Webpack，若缺少此组件也无法正常启动构建流程。 3. **Webpack-Dev-Server**: 开发服务器提供了一个动态更新页面的功能，允许实时重新加载浏览器中的更改内容而无需手动刷新整个网页。这对于加快迭代周期非常有用，尤其是在调试阶段[^5]。 #### 二. 全局安装的意义与优势 通过 `cnpm install webpack webpack-cli webpack-dev-server -g` 命令实现这些工具的全局可用性意味着： - 用户可以从任意位置调用它们的相关命令，例如直接输入 `webpack` 即可触发打包操作，或者使用 `webpack-dev-server` 启动服务。 - 对于跨项目的通用需求来说特别方便，因为不需要每次进入新的工程都要重复设置相同的环境条件[^4]。 然而需要注意的是，尽管这种做法简化了一些初始配置步骤，但它也带来了潜在的风险——不同机器上的全局包可能处于不同的版本状态，这可能导致不可预测的行为差异甚至冲突现象的发生。 #### 三. 局部 vs 全局的区别 | 特征 | 全局安装 | 局部安装 | |---------------------|-----------------------------------|---------------------------------------| | **适用范围** | 整个操作系统 | 指定项目内部 | | **优点** | 易于访问; 不需额外路径设定 | 更精确控制每项工作的具体依赖版本 | | **缺点** | 可能引起多设备间一致性问题 | 初期准备时间较长 | 因此，在决定采取何种策略之前应当权衡利弊，并考虑到团队协作模式和个人习惯等方面因素的影响[^1]。 #### 四. 结合实例说明 假设我们现在有一个名为 MyProject 的 React 应用程序需要集成上述提到的所有三项技术，则可以通过如下方式完成初步搭建: ```bash mkdir myproject && cd $_ npm init -y cnpm install react react-dom --save cnpm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader style-loader html-webpack-plugin clean-webpack-plugin --dev-save ``` 之后为了便于日常维护还可以进一步完善 package.json 中 scripts 字段的内容以便更便捷的操作: ```json { ... "scripts": { "start": "npx webpack serve", "build": "npx webpack" } } ``` 这样以后只需要简单键入 `npm start` 或者 `npm run build`, 就可以分别开启本地测试服 务器或是正式生产版压缩后的静态资源了. --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值