webpack配置本地服务器webpack-dev-server

最新推荐文章于 2025-06-04 22:10:15 发布
原创 最新推荐文章于 2025-06-04 22:10:15 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack

本文记录了webpack本地服务器的配置过程。首先安装webpack-dev-server，接着配置webpack.config.js和package.json文件，使用 --open 命令可在启动时自动打开页面，最后通过npm run dev启动本地服务器。作者还提醒敲代码要仔细，避免粗心出错。

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

webpack配置本地服务器

今天学习了webpack的本地服务器的配置，配置还是简单好学的，在这过程中由于自己的粗心大意写错了一个单词导致了报错，找了好久才发现问题，忘小伙伴们敲代码的过程中一定要仔细，千万不要像我一样，耽误了不少时间(哭泣~~)。
开始记录新的学习知识吧，走起 ——>

第一步

安装webpack-dev-server
我使用的安装命令是：yarn add webpack-dev-server -D

在这里插入图片描述
第二步

配置webpack.config.js文件

在这里插入图片描述
第三步

配置package.json文件
ps： --open命令可以在启动本地服务器的时候自动在浏览器中打开页面

在这里插入图片描述
第四步

启动本地服务器：npm run dev

在这里插入图片描述
至此，启动成功~~

最新的vue webpack没有dev-server文件，如何实现mock后台数据模拟
mx_is_bang的博客
02-12 705
dev-server文件在最新的vue版本中是webpack.dev.conf.js 代码没有太大变动，只是语法上有一些改变 ！！修改后一定重新启动npm run dev,才能访问到接口数据 webpack.dev.conf.js文件 const express = require('express') const app = express()//请求server var goodsData =...
Webpack中搭建本地服务dev-server
weixin_47342624的博客
08-10 884
HMR Socket Server，是一个socket的长连接建立连接后双方可以通信，当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk），通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；webpack-dev-server 是运用另一个node 框架 express开启本地的静态资源服务，和开启Socket服务；
webpack搭建本地服务器
hhtSeeTheWorld的博客
04-22 183
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpack中使用之前需要先安装它 npm install --save-dev webpack-dev-server@2.9.1 devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
Webpack搭建本地服务器
最新发布
chestnut_orenge的博客
06-04 1009
搭建本地服务器可提升开发效率，通过webpack-dev-server实现自动编译与实时更新。配置HMR热模块替换功能可避免全页刷新，保留应用状态，提高调试速度。针对Vue/React项目可使用vue-loader或react-refresh实现框架级的HMR支持。开发服务器还支持host配置（如0.0.0.0允许外部访问）、自动打开浏览器、gzip压缩等功能，满足不同开发场景需求。
webpack构建本地服务器
王维璋
07-18 304
webpack构建本地服务器 webpack构建本地服务器 想不想让你的浏览器监测你的代码的修改，并自动刷新修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建， 可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖 1、安装webpack-d...
webpack 学习（6）--- 使用webpack构建本地服务器
半夏半暖半倾城的博客
08-18 740
我们之前一直都在用live-server充当本地服务器，其实它和webpack是不搭的，我们可以利用webpack自带的webpack-dev-server来构建一个本地服务器。它让你的浏览器检测你的代码修改，并自动刷新修改后的结果，它是基于node.js构建。webpack-dev-server是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。 安装webpack-...
webpack-使用webpack-dev-server.rar
04-12
然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...
使用webpack3.0配置webpack-dev-server教程
08-27
四、devServer配置对象属性 在devServer中，我们可以配置以下几个常用的属性： 1. contentBase："./" // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可； 2. historyApiFallback：true // 当我们搭建spa...
webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08
钢铁直女
05-06 1321
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框架，可以实现浏览器实时更新页
(掌握)webpack开启本地服务器
小余的前端博客
04-26 620
【代码】(掌握)webpack开启本地服务器。
搭建本地服务器（webpack-dev-server）
A____t的博客
04-26 1194
使用webpack搭建一个本地开发服务器
Vue学习笔记-Day8 webpack-dev-server搭建本地服务器
qq_33426324的博客
03-01 219
webpack-dev-server搭建本地服务器 基于node搭建，内部使用express框架。这个服务器的作用相当于就是热部署，我们不需要在每次更改代码后都去重新打包。 基本原理：对代码进行监听，如果发生改变，就重新进行编译，然后将编译生成的东西缓存到内存中，而不像打包后自动写入磁盘。放在内存中，无论是读写速度都比较快，这样方便我们进行开发调试 安装配置 安装webpack-dev-serve...
前端小白入门webpack之搭建本地服务器
weixin_43916611的博客
12-26 357
文章目录前言一、使用流程？总结今日推荐 前言 webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 先暂时缓存到内存里面。 一、使用流程？ 先安装对应搭建服务器的库 安装完成之后，我们依旧按照往常到webpack.config.js中去配置 再到package.json中去配置指令 然后我们执行指令 然后就运行到8080端口啦 现在我们就可以实时的进行修改测试 如果我们上传部署，
python mock server_使用webpack-dev-server创建mock server
weixin_29554849的博客
12-23 322
在开发基于 api 交互、前后端分离的网页应用时，经常会遇到几个问题：前端页面已经编排好了，但是后台接口还没准备好我们希望服务器返回特定类型的数据，以测试某页面在特定条件下是否存在问题，但作为前端我们一般不会接触到后端代码和数据库，每次都找后端添加模拟数据又很麻烦。为解决这两个问题，最简单的解决办法就是搭建一个 mock server，专门返回需要的模拟数据。webpack-dev-server ...
在webpack-dev-server内添加mock server
weixin_33815613的博客
05-16 3490
在开发基于api交互、前后端分离的网页应用时，经常会遇到几个问题： 前端页面已经编排好了，但是后台接口还没准备好，或者是突然出现Bug，这样没办法进行对接测试。 我们希望服务器返回特定类型的数据，以测试某页面在特定条件下是否存在问题，但作为前端我们一般不会接触到后端代码和数据库，每次都找后端添加模拟数据又很麻烦。 为解决这两个问题，最简单的解决办法就是搭建一个mock server，专门返回需...
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值