webpack-dev-server 开启远程访问的配置方法

作者：编译时光时间：2026-10-22 12:49:06浏览：75

本文介绍如何在 webpack-dev-server 中配置远程访问。默认情况下服务仅监听 localhost，通过修改 package.json 中的 dev 脚本，添加 --host 参数指定 IP 地址，即可实现局域网或远程设备访问。配置后需注意 localhost 可能无法直接访问，需使用指定 IP 或 127.0.0.1。

webpack-dev-server 远程访问配置方法

在 package.json 文件的 scripts 配置中，webpack-dev-server 默认处于开发模式。此时，用户可以直接通过 http://localhost:8080 或 http://127.0.0.1:8080 这两个地址来访问服务。


"scripts": { 
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 
  "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules" 
 },

如果希望允许远程设备访问该服务，则必须对 package.json 文件中的相关配置进行修改。


"scripts": { 
  "dev": "webpack-dev-server --host 10.30.1.102 --devtool eval --progress --colors --hot --content-base build", 
  "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules" 
 },

完成上述修改后，服务将允许通过 http://192.168.10.8:8080 或 http://127.0.0.1:8080 这样的地址进行访问。需要注意的是，此时 http://localhost:8080 可能无法再进行访问。

以上即为 webpack-dev-server 远程访问的配置方法，供参考使用。

作者最新文章

JS代码格式化后报错怎么办？解决Prettier与ESLint冲突

2026-11-04 16:18:04

Webpack/Vite中怎么将HTML文件导入为JS模块

2026-11-03 20:13:12

Three.js引入报错怎么办：模块导入与路径问题排查

2026-11-03 08:21:19

Swiper.js 基础教程：CDN 引入与 npm 安装初始化步骤

2026-11-02 09:18:52

不使用第三方工具怎么手动更新 Node.js

2026-11-02 09:17:40