webpack(9)_使用webpack-dev-server

最新推荐文章于 2025-07-08 22:57:49 发布
最新推荐文章于 2025-07-08 22:57:49 发布
阅读量617 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010982507/article/details/82056221
本文介绍了webpack-dev-server的功能，包括live reloading、路径重定向、https等，并详细讲解了如何配置模块热更新和SourceMap调试，是学习webpack开发环境搭建的实用教程。

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

webpack-dev-server

webpack-dev-server插件能够为本地提供一个node.js服务，来运行当前的html文件。
1、live reloading
2、路径重定向
3、https
4、浏览器中显示编译错误
5、接口代理
6、模块热更新

webpack-dev-server的使用

  • 安装
    npm install webpack-dev-server --save-dev
  • 在package..json中配置
"scripts": {
  "dev":"webpack-dev-server --open"
}
// 配置好之后就可以在控制台，使用`npm run dev`来开启服务。
  • 在webpack.config.js中配置端口
devServer: {
    port: '8888',
}

devServer中设置路径重定向

  • 如果在页面中请求一个url，需要配置一些公共请求时，则需要在proxy代理中，配置相关属性。

                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
Vue基础技术 webpack-dev-server的配置和使用_loglevel webpack-dev-server

				
			

			

				

					2401_84447043的博客
				

				

					05-16
					
					486
					
				

			

		

		

			
				
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

			
		

	



                

            
              



	

		

			

				
					
@ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 w

				
			

			

				

					肖肖的博客
				

				

					10-30
					
					2586
					
				

			

		

		

			
				
/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./src/views/404.vue 
4:14-446 13:3-17:5 14:22-454
 @ ./src/views/404.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/clie

			
		

	



              


  
              

                


	

		

			

				
					
解决webpack dev-server不能匹配post请求的问题

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了解决webpack不能匹配post请求的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
webpack---devServer

				
			

			

				

					weixin_43390711的博客
				

				

					05-18
					
					265
					
				

			

		

		

			
				
devServer: {
    // 指定运行代码的目录，一般也是所有资源的输出目录
    contentBase: resolve(__dirname, 'dist'),
    // 监视contentBase目录下所有文件，一旦发生变化就reload
    watchContentBase: true,
    watchOptions: {
        // 让监视更高效
        ignored: /node_modules/
    },

    // 启动gzip压缩
  .

			
		

	



		

			
		



	

		

			

				
					
Webpack Dev Server

					
最新发布

				
			

			

				

					D_xw_的博客
				

				

					07-08
					
					1584
					
				

			

		

		

			
				
 Webpack Dev Server 是 Webpack 提供的一个开发辅助工具，主要功能是通过本地服务器实时刷新页面。

			
		

	





	

		

			

				
					
webpack-dev-server

				
			

			

				

					lin1072368472的博客
				

				

					02-25
					
					144
					
				

			

		

		

			
				
安装
npm install webpack-dev-server  

目前文档写的时间是2020年2月25日10:27:23
原本安装完 webpack-dev-server 可以执行 npm run dev
此时还要在项目文件夹下安装
npm install webpack-cli -D

才可以运行
安装完执行npm run dev打开项目
##配置webpack-dev-server命令...

			
		

	





	

		

			

				
					
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中，我们可以使用hot属性来启用热模块替换特性，但是需要使用webpack.HotModuleReplacementPlugin插件。下面是一个基本的配置示例：  ``` const path = require("path"); const webpack = require(...

			
		

	





	

		

			

				
					
webpack-dev-server(devServer)

				
			

			

				

					我的博客简介
				

				

					08-05
					
					716
					
				

			

		

		

			
				
修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；而是将 bundle 文件保留在内存中，事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）将css提取到一个独立的css文件中。webpack热更新原理。....

			
		

	





	

		

			

				
					
npm i webpack webpack-cli webpack-dev-server -D

				
			

			

				

					03-27
				

			

		

		

			
				
<think>嗯，用户想安装Webpack、webpack-cli和webpack-dev-server作为开发依赖。他们可能遇到了版本兼容的问题，因为引用里提到过版本不兼容时需要卸载重装。首先，我需要确定正确的安装命令，并且确保版本兼容。

根据引用[2]，安装时需要指定兼容版本。用户可能之前装过其他版本，导致错误，所以应该先卸载旧版本。然后，安装特定版本的包。例如，webpack@5.42.1、webpack-cli@4.7.2和webpack-dev-server@3.11.2。这样组合应该是兼容的，因为引用[1]和[2]都提到了这些版本。

用户的问题是如何用npm安装并添加到devDependencies。正确的命令应该是npm install -D加上具体版本号。还要提醒用户检查package.json里的devDependencies是否正确，以及是否需要配置scripts和webpack.config.js。此外，可能还要提到版本冲突时的解决方法，比如使用npx或查看官方文档确认兼容性。

需要分步骤回答，先卸载旧版本，再安装新版本，并验证安装。还要注意不同项目可能需要不同的版本，所以最好根据项目需求调整。最后，可能还需要初始化npm项目，如果还没有package.json的话，但用户可能已经执行过npm init -y了，如引用[1]所示。</think>要正确安装 Webpack 及其相关工具作为开发依赖，请按以下步骤操作：

### 1. 清理旧版本（可选）
若之前安装过不兼容版本，建议先执行全局卸载：
```bash
npm uninstall webpack webpack-cli webpack-dev-server -g
```
本地项目卸载：
```bash
npm uninstall webpack webpack-cli webpack-dev-server
```

### 2. 安装指定版本组合
```bash
npm install webpack@5.42.1 webpack-cli@4.7.2 webpack-dev-server@3.11.2 --save-dev
```
该版本组合经过验证兼容性[^1][^2]

### 3. 验证安装
查看 package.json 的 devDependencies 字段应包含：
```json
"devDependencies": {
  "webpack": "^5.42.1",
  "webpack-cli": "^4.7.2",
  "webpack-dev-server": "^3.11.2"
}
```

### 4. 补充配置
在 package.json 中添加启动脚本：
```json
"scripts": {
  "start": "webpack-dev-server --mode development"
}
```

### 版本冲突处理建议
若需安装其他版本，可参考官方兼容性对照表：
$$ 
\text{Webpack 5.x} \leftrightarrow \text{webpack-cli 4.x} \leftrightarrow \text{webpack-dev-server 3.x/4.x}
$$
最新版本建议使用：
```bash
npm install webpack@latest webpack-cli@latest webpack-dev-server@latest --save-dev
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
ruiurrui

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值