webpack-dev-server搭建本地服务器（解决webpack-cli、webpack-dev-server版本不兼容报错）08

最新推荐文章于 2024-08-13 08:10:28 发布
最新推荐文章于 2024-08-13 08:10:28 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： Webpack学习笔记 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44836362/article/details/116331748
版权
本文介绍了如何使用webpack-dev-server搭建本地开发服务器，包括安装、配置devServer及解决webpack-cli与webpack-dev-server的版本不兼容问题。通过设置contentBase、port、inline和historyApiFallback等选项，实现浏览器实时更新页面功能。当遇到版本不兼容问题时，可以通过降级webpack-cli版本来解决。
摘要由CSDN通过智能技术生成

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

webpack-dev-server搭建本地服务器，开发阶段使用

webpack提供的本地开发服务器，基于node.js搭建。内部使用express框架，可以实现浏览器实时更新页面的效果。

，基于某个文件夹的服务器，编译之后暂时放在内存（从内存读取更快），之后再执行npm run build存储在磁盘中。

1、安装webpack-dev-server（开发时依赖）

此处安装webpack-cli@3、weboack-dev-server@3，否则版本不兼容。
在这里插入图片描述
在这里插入图片描述

2、在webpack.config.js文件中配置devServer

  • contentBase：服务的文件夹
  • port：指定端口号，默认端口为8080
  • inline：设置为true，则进行实时监听
  • historyApiFallback：在SPA（单页面复应用）页面中，依赖HTML5的history模式
最低0.47元/天 解锁文章
Webpack中搭建本地服务dev-server
weixin_47342624的博客
08-10 710
HMR Socket Server，是一个socket的长连接建立连接后双方可以通信，当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk），通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；webpack-dev-server 是运用另一个node 框架 express开启本地的静态资源服务，和开启Socket服务；
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
Webpack Dev Server 教程
最新发布
gitblog_01114的博客
08-13 719
Webpack Dev Server 教程 webpack-dev-serverServes a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.项目地址:https://gitcode.com/gh_mirrors/we/web...
python中setup是什么意思_『Python』setup.py简介
weixin_39797264的博客
12-04 2342
setup.py应用场合网上见到其他人这样介绍：假如我在本机开发一个程序，需要用到python的redis、mysql模块以及自己编写的redis_run.py模块。我怎么实现在服务器上去发布该系统，如何实现依赖模块和自己编写的模块redis_run.py一起打包，实现一键安装呢？同时将自己编写的redis_run.py模块以exe文件格式安装到python的全局执行路径C:\Python27\S...
webpack-dev-server5.0+ 版本问题
gaodda的博客
03-12 685
在使用webpack-dev-server搭建新项目时，需要依赖node 和webpack以及webpack-cli。这是需要注意各个应用之间的版本问题。
webpackcli和webpack-dev-server兼容问题
qq_42683219的博客
02-22 3042
项目配置 "devDependencies": { "cross-env": "^7.0.3", "html-webpack-plugin": "^5.2.0", "ts-loader": "^8.0.17", "webpack": "^5.23.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" } 当使用官方给出方式启动webpack-dev-server时会报错， node:in
关于vue开发nodejs安装webpack , webpack-cli ,webpack-dev-server版本匹配选择问题
智轩软件的专栏
01-13 1055
选择以下组合版本调试通过。
详解webpack-dev-server使用http-proxy解决跨域问题
01-19
Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的，不过用在webpack-dev-server上也是一样的 http-proxy-middleware——webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack...
vue项目中的webpack-dev-sever配置方法
08-28
在Vue项目中，通常使用`vue-cli` 创建项目，`vue-cli` 已经默认配置了`webpack-dev-server`，但有时我们需要根据需求进行定制化配置。 1. **配置文件位置**： 在Vue项目中，`webpack-dev-server` 的配置通常位于`...
使用webpack3.0配置webpack-dev-server教程
01-19
不过，在实际操作中发现，用webpack搭建服务器仍有不少坑，一方面是由于自己对文档的不熟悉，不了解webpack-dev-server的运作模式；另一方面，在翻阅了不少博客和文章后，发现不少配置实际上都跑不起来（有可能是...
完美解决webpack-dev-server报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'
热门推荐
"✧treasure mountain✧"
04-25 2万+
问题描述 在执行webpack-dev-server命令的时候 遇到如下错误： The CLI moved into a separate package: webpack-cli Please install 'webpack-cli' in addition to webpack itself to use the CLI -> When using npm: npm i -D webp...
webpack-dev-server：静态资源目录配置
席木木的博客
01-17 6724
webpack-dev-server：静态资源目录配置
vue webpak版本 查看_vue版本以及webpack版本
weixin_39590472的博客
01-17 3982
vue作为大前端的主流框架 更新速度也是极快。那么vue的更新会有哪些问题呢？最近在搭建vue框架的时候发现由于vue版本的快速迭代已经与原本般配的webpack产生了隔阂。webpack作为大前端的主流打包工具 如果与之不兼容，会有越来越多的麻烦事情。经过反复测试，得出结论一篇 vue与webpack最佳拍档组合版本号公布。npm initnpm install webpack@3.10.0 v...
Webpack——devServer开发服务器配置
weixin_42789698的博客
05-18 339
文章目录devServer开发服务器配置一、下载webpack-dev-server二、配置webpack.config.js三、启动webpack-dev-server devServer开发服务器配置 一、下载webpack-dev-server 执行命令：cnpm i webpack-dev-server -D 二、配置webpack.config.js // 用来拼接绝对路径 const { resolve } = require('path'); // html插件，用来处理html cons
14-webpack研究-webpack-dev-server
minihuabei的博客
01-20 291
创建webpacktest02文件夹 创建vue_02文件 注意：代码里不要一句js代码，删除引入外部js的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title> </head> <body> <div id="app"> <a v-bi
webpack安装 webpack-dev-server后运行报错
qq_44696583的博客
12-12 2807
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
webpack-dev-server 配置以及webpack教程
weixin_40254430的博客
02-09 4805
webpack是什么? 一开始我也不理解? 看了许多文档都是在扯淡，摞了一大堆,点子却没说到。当然我说的可能也不对，希望诸位取其精华，去其糟粕。 因为包括官方文档，虽然翻译说的是人话，但是你却找不出一点点有用的有效的信息。 至于其他人的就是罗里吧嗦一大堆。写这个，就是想说，这玩意其实很简单。包括在php上，就是php的blade指令。不过php是直接略过了。压根没当回事。是因为什么被搞复杂了。是因为每个人的思维不透明。才造成交流沟通的困难。我这里写这个就是希望可以帮助到大家。 webpack其实就两个关.
一定要知道的简单配置Webpack操作
世界和我们都不该止步于此
04-20 797
目录 一.初识Webpack-安装与配置 二.基于webpack的小案例 三.解决一些使用webpack的问题 四.webpack-dev-server 五.html-webpack-plugin 六.devServer 七.@标识符导入模块 一.初识Webpack-安装与配置 Webpack是前端工程化的一个具体解决方案 提供了友好的前端模块化开发支持、代码压缩混淆、解决浏览器对于JavaScript低级高级语言兼容性的处理，优化性能等等，极大的提高了开发的效率与项目可维护...
webpack5.x热模块更新之webpack-dev-server不兼容问题
派大星球
08-25 1084
8.vi-vim-终端编辑器 8.1.vi简介 8.1.1.使用vi的目的 在工作中，要对服务器上的文件进行键的修改，可以使用ssh远程登录到服务器上，并使用vi进行快速的编辑即可 常见的需要修改的文件包括： ·源程序 ·配置文件，例如ssh的配置文件~/.ssh/config ·在没有图形见面的环境下，要编辑文件，vi是最佳选择 ·每一个要是用Linux的程序员，都必须或多或少的学习一下vi编辑的常用命令 8.1.2.vi和vim 在很多Linux发行版中，直接吧vi做成vim的软链接 vi 是Visua
webpack webpack-cli webpack-dev-server配置
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值