webpack-dev-server的安装

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量2.3w 收藏 10
点赞数
分类专栏： webpack vue2.0 周家大小姐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40190624/article/details/79588100
版权
本文介绍了如何安装和配置webpack-dev-server。遇到版本不兼容问题时，需要更新或降级webpack版本。局部安装1.16.5的webpack-dev-server后，可能需要卸载并重新安装node_modules。在全局安装时，确保webpack-dev-server版本与项目匹配。启动时可能出现的错误可以通过设置PublicPath解决。此外，webpack-dev-server/client在线上环境应避免被打包，可以通过环境变量进行配置。
摘要由CSDN通过智能技术生成

webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.

注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它.

发现报错了;原因是我们用的1.15.0的webpack版本低了;需要3或者4点几的版本

重装webpack/或者降低    webbpack-dev-server

再装一次npm install webpack-dev-server

我又尝试了第二种方法;在局部我安装了一个1.16.5的webpac

最低0.47元/天 解锁文章
周家大小姐.
关注
专栏目录
【整理篇】极速上手！webpack-dev-server的相关配置
SuperZZQ_的博客
12-27 1801
Webpack-dev-server是一个小型的Express(Node.js) 服务器，可以通过配置webpack开发中间件来为项目服务，并且能够无需刷新，自动更新，使开发者在前端开发过程中拥有超快的反馈和超赞的体验（就是爽）。本篇主要讲解已有webpack4.x版本基础上，安装与配置相关文件，搭建起webpack-dev-server服务器，实现极速上手与简单理解。 由于本篇接【整理篇】上手...
webpack-使用webpack-dev-server.rar
04-12
然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...
webpack 及webpack-dev-server安装
米洛尔的博客
05-30 3029
文章目录1、webpack 及webpack-dev-server安装1.1 npm常用命令解释2、安装步骤2.1 webpack安装版本2.2 webpack-dev-server 安装版本2.3 再次安装本地项目的webpack2.4 配置package.json的dev 1、webpack 及webpack-dev-server安装 1.1 npm常用命令解释 npm i module...
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 4490
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
[webpack-cli] You need to install ‘webpack-dev-server‘ for running ‘webpack serve‘.TypeError: Canno
qq_54412839的博客
02-06 1418
原因：node的版本不对，本来是V12.0.0，后面改成成12.10.0之后成功启动。步骤：重新install。
[webpack-cli] For using ‘serve‘ command you need to install: ‘webpack-dev-server‘ package
weixin_45841729的博客
06-08 7286
错误描述 [webpack-cli] For using 'serve' command you need to install: 'webpack-dev-server' package [webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n) n npm ERR! code ELIFECYCLE npm ER
解决[webpack-cli] You need to install ‘webpack-dev-server Error: Cannot find module ‘send’问题（Linux也适用）
weixin_46900108的博客
09-20 1万+
我们在编译vue项目时，有时候就会遇到 [webpack-cli] You need to install 'webpack-dev-server Error: Cannot find module ‘send’这个报错问题 这里本着一个原则问题，缺啥安啥，然后重新加载一下，然后最好是重启一下电脑 在node.js安装包下重新加载安装的模型包 然后一路next就可以 最终我们重新加载一下就可以 yum install webpack-dev-server --save-dev 缺啥安啥缺什么模型包
webpack和webpack-dev-server的安装，查了很多网站，终于能用了
insgo的博客
10-18 849
** webpack 和 webpack-dev-server 的安装，看完就能用 以前装过的话要先卸载，卸载代码（卸载全局安装的的代码） ** npm uninstall webpack -g 项目中本地安装的可以直接删除项目中的node_modules文件夹 然后说安装吧，打开vscode的终端（终端-新建终端） 依次输入下面的代码，等待安装 npm init -y npm i jquery ...
webpack-dev-server自动更新页面方法
11-26
首先，确保你已经正确安装了 Webpack 和 Webpack Dev Server。你可以通过以下命令安装这两个组件： ```bash cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev ``` 在项目结构中，通常会有一个 `...
详解webpack-dev-server的简单使用
08-27
* 在 webpack.config.js 中添加 devServer:{inline:true} 2. 当以 Node.js API 启动 Webpack-dev-server 时，我们也需要做两点： * 由于 Webpack-dev-server 的配置中无 inline 选项，我们需要添加 webpack-dev-...
详解Webpack-dev-server的proxy用法
10-18
主要介绍了详解Webpack-dev-server的proxy用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
自动打包插件webpack-dev-server的安装、配置及使用
01-08
在项目的根路径下输入：cnpm i webpack-dev-server -D 将插件安装到项目的本地开发依赖中 该工具的用法和webpack命令的用法完全一致 直接输入命令即可自动监听 在项目中本地安装的webpack-dev-server无法作为脚本...
webpack4.XX安装webpack-dev-server工具以及遇到的各种问题
odelia的博客
11-04 3012
1.npm i webpack-dev-server -D 安装 2、package.json文件中配置dev 代替webpack-dev-server 3、运行 报这个错误说明webpack没有安装到项目中;就算之前装了webpack，那肯定是非全局安装，所以只需要将之安装到项目中即可: 4、再次执行npm run dev依旧报错： 各种百度之后发现可能是webpack与w...
webpack的使用
xiafanyuan的博客
03-12 114
模块化开发 为什么用模块化开发？ 原因：1.主要是js文件依赖于导入顺序几乎是强制性的，当导入的多个js文件使用相同的变量名时，就会出现下层变量名覆盖上层变量名情况。 解决1：使用闭包函数，形成局部作用域。 (function(){ var flag = true })() 问题2：当使用闭包函数时，文件之间变量就不能被引用 解决2：在闭包函数内定义一个对象，并把它返回。 var moduleA = (function () { var obj = {}; var flag = t
解决 webpack5安装 webpack-dev-serve报错python问题 gyp ERR
kzj0916的博客
09-20 446
安装 webpack-dev-serve 执行指令：npm install webpack-dev-server -D 发现并没有老老实实给我们安装，而是报了一大堆错误，如下 报了一大堆Python相关错误 查了一大堆博客都没有找到解决方案 最后通过指定版本的方法解决了 解决方案 指定版本进行安装即可解决 执行：npm install webpack-dev-server@3.11.2 -D 安装成功！！ 防止大家踩坑 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
没做过产品的后端不是个好前端
11-06 366
一.webpack基础 　　1.在项目中生成package.json：在项目根目录中输入npm init，根据提示输入相应信息。（也可以不生成package.json文件，但是package.json是很有用的，所有建议生成） 　　2.安装webpaack 　　　　a.在全局中安装webpack：npm install webpack -g 　　　　b.将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件.
Wangdr的博客
05-17 604
删除node_module包 用npm i 或 cnpm i 从新下载 然后cnpm run dev
vue项目初始化时npm run dev报错webpack-dev-server解决方法
muguazhuye的博客
10-30 1318
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因：这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好 webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低 （1）、npm uninstall webpack-dev-server （2）、npm install webp...
vue 如何新建一个项目
热门推荐
ygy211715的博客
02-27 6万+
身为入行未深的小白前端，不断的学习是我们不可丢失的习惯。前端流行的框架也是层出不穷，vue在众多框架中脱颖而出。今天花了两个小时的时间自己走了一边创建vue项目的流程，跟你们分享。1：打开cmd命令行，首先安装node步骤：https://nodejs.org/en/download/      node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版...
webpack-dev-server安装
03-17
要安装webpack-dev-server，请在项目目录中运行以下命令: ``` npm install webpack-dev-server --save-dev ``` 或 ``` yarn add webpack-dev-server --dev ``` 安装完成后，您可以在项目目录中运行以下命令来启动本地开发服务器: ``` ./node_modules/.bin/webpack-dev-server ``` 也可以在项目目录中配置package.json文件中的scripts，然后运行 ``` npm run dev ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周家大小姐.

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值