webpack5输入指令npx webpack-dev-server 使用webpack-dev-server报错

最新推荐文章于 2023-06-13 09:12:46 发布
最新推荐文章于 2023-06-13 09:12:46 发布
阅读量5.7k 收藏 5
点赞数 2
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42125732/article/details/117436799
版权

当输入指令npx webpack-dev-server执行的时候，有了以下错误
在这里插入图片描述
package.json的内容如下
在这里插入图片描述

原因：webpack现在存在一个bug,最新版的webpack-dev-server 和最新版的webpack-cli 并不兼容。

解决方法一：

webpack-cli的版本降为3.3.12

解决方法二：

使用npx webpack serve这个命令运行。

运行成功截图如下
在这里插入图片描述
在这里插入图片描述

是小橙丶
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack-dev-server配置失败的原因
a125129167的博客
06-24 3583
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。 主要提供了2个功能： 为静态文件提供服务 自动刷新和热替换(HMR) 一般的项目文件结构为: |--src | |--views | |--index.js | |--module_a | |--list.js | |--module_b
npx webpack-dev-server后都报的哪些恶心错误（各类版本不符）
elephant230的博客
05-13 1622
webpack4的各项版本匹配
解决webpack5下使用webpack-dev-server报错
peter_hzq的博客
11-13 5566
先说下我使用的版本 "webpack": "^5.4.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" 使用 npx webpack-dev-server 运行会报Error: Cannot find module 'webpack-cli/bin/config-yargs'这样的错误。 解决方法一： webpack-cli的版本降为3.3.12 解决方法二： 使用npx webpack serve这个命令运行。 ...
12. Webpack 搭建开发服务器
m0_71902265的博客
11-13 336
Webpack搭建本地服务器
手把手，VUE 打包打包改造教程
xuedengyong的博客
05-15 1370
VUE 打包封装 最近公司好多项目用到了VUE，大家有遇到VUE打包生产，测试要修改配置文件的痛点，由于算是比较早的VUE使用人员，之前对webpack有所研究，结合项目和网上资料，自己实践过VUE项目打包改造。总结如下，希望对大家有所帮助 1.对打包的理解 为什么 npm run build 会执行打包？ 由于之前是小白，也没有时间研究webpack，所以我全文搜索了一下build，最后发现最有关联可能的就是build.js和package.json ，此外之前对element ad...
webpack serve 正常启动但没效果
goodman2980的博客
08-08 1264
安装完 webpack-dev-server 后 配置webpack.config.js。然后 npm run dev，服务器正常启动，且保存修改index.js有反应。但是打开网页却发现js的修改对网页没有效果。在package.json中配置。
webpack知识点下
weixin_44956916的博客
12-21 335
十六、自动编译打包运行 1)安装 cnpm install webpack-dev-server -D 2）代码 devServer:{ open:true,//在浏览器中开发项目 openPage:"home.html",//默认会打开index.html文件，但是我们更改为home.html，所以要指定 host:"127.0.0.1",//设置打开的地址 port:"8000",//设置打开的端口号 } npx w
webpack5基础使用（2）-生产环境使用
lalala_dxf的博客
07-22 300
生产环境是开发完代码后，需要将得到的代码部署上线，这个模式下主要对代码进行优化，让其运行性能更好。优化主要从这两个角度出发1、优化代码运行性能2、优化代码打包速度。
webpack自动化打包webpack-dev-server
jieyucx的博客
06-13 4418
是一个基于Node.js构建的Web服务器，它可以在本地开发环境中启动一个实时的Web服务器，并且能够自动编译并且刷新浏览器，为前端开发提供了很大的便利。支持热模块替换（HMR），即在应用程序运行中更新模块而无需刷新整个页面，它还提供了一些其它的特性包括压缩、编译、转换、代码分离等等。通常用来搭建本地开发环境，而部署时则需要使用其它的Web服务器。
【专项学习】 —— Webpack5基础配置详细教程学习（二）
柳柳66的博客
03-03 539
一、打包其他资源 1、字体图标等属于其他资源，即不需要做优化做压缩的资源。首先去阿里矢量图标库下载一些图标。 2、下载后解压，里边有这些东西。 demo_index是使用说明 3、然后我们将iconfont.css等文件放到工程文件夹下。 我们需要对css文件、html文件、js文件、ttf文件进行打包。 4、那么在webpack.config.js配置文件中写代码。 cons...
webpack-config-plugins:提供有关Webpack加载程序配置的最佳实践
05-14
可插拔的Webpack配置 创建webpack加载器配置可能会非常耗时。...npm i --save-dev webpack webpack-cli common-config-webpack-plugin npx webpack --plugin common-config-webpack-plugin 零配置webpac
webpack-config-plugins：提供有关webpack加载程序配置的最佳实践
02-06
快速概述npx generate-webpack-config或者，您也可以使用开始使用。零配置示例Webpack本身提供了许多默认值，因此您可以在没有webpack.config文件的情况下运行common-config-webpack-plugin ： npm i --save-dev ...
react-boilerplate：具有webpack和babel最佳实践的React样板
02-04
用ubers设计系统React样板 ...使用webpack-bundle-analyser和bundle-buddy生成报告 运行捆绑伙伴yarn build && npx bundle-buddy dist/*.map 装箱尺寸 运行yarn check-size 故事书 通过调用yarn storyboo
svelte-webpack-mpa:用于创建由webpack支持的多页应用程序的模板
05-02
npx degit brandonxiang/svelte-webpack-mpa svelte-app cd svelte-app yarn # or npm i 您的静态文件可以放在public文件夹中。 发展 yarn dev # or npm run dev 第一页是http://localhost:9000/page1.html 。 ...
webpack-nano：简洁，干净的Webpack CLI
01-30
npm install webpack-nano --save-dev 要求 webpack-nano是一个常绿模块。 :evergreen_tree: 该模块需要节点版本（v10.0.0 +）。 好处 圣香蕉 :banana: 这是它的有点 不会像雪崩般挥舞着旗帜和期权 允许任意数量的...
运行npx webpack-dev-server报错：Error: getaddrinfo ENOENT localhost
CheyBen的博客
03-17 695
报错截图： 问题原因： localhost没有与127.0.0.1绑定 解决方法： 修改hosts文件，将127.0.0.1与localhost进行映射
npx webpack报错问题
xyzsd1108的博客
07-04 1639
webpack遇到的问题
已解决：输入npx webpack-dev-server指令后控制台显示成功执行，但是浏览器显示 cannot get/，浏览器控制台显示404
cake_eat的博客
10-29 1979
原因：contentBase配置错误
webpack的基本配置二
weixiwo的博客
11-09 286
webpack 继续上一篇博客 1.webpack devServe 所以需要下载npm i webpack-dev-server -D 由于改变代码但是没有重新打包，如果重新更改代码，希望看到一个热更新的效果，所以有了webpack的devServe来自动打包，需要我们在webpack.config.js中去配置 devServer:{ // 项目构建后的路径 contentBase:resolve(__dirname,'js/built.js'),
npx webpack-dev-server -d --env development --mode development --progress --inline --hot --config webpack.config.js
最新发布
04-01
npx webpack-dev-server是一个用于开发环境的Webpack插件，它提供了一个本地开发服务器，可以实时编译和热更新你的代码。下面是对命令中各个参数的介绍： - -d：该参数是webpack-dev-server的缩写，用于启动开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值