webpack-cli4 启动webpack-dev-server报错

最新推荐文章于 2022-08-03 16:34:30 发布
最新推荐文章于 2022-08-03 16:34:30 发布
阅读量1.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hetingtingitsme/article/details/116426569
版权

package.json 配置

	"webpack": "^5.36.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"

当webpack-cli为4以上版本时，我们启动webpack-dev-server时，按照以往经验配置如下：

"start": "webpack-dev-server"

报错如图：
在这里插入图片描述

需要将scripts脚本里面的webpack-dev-server 改为webpack serve --open，jiuhaole

"start": "webpack serve --open"

如果还有报错如下：
Error: getaddrinfo ENOTFOUND localhost at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:6

在hosts里面将127.0.0.1 绑定到localhost就可成功启动服务器了

hetingtingisme
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack4.x 版本入门指南
yk75952的博客
03-29 4390
本文是基于一位以前公司的同事zzj所写的 Webpack入门指南 这篇文章做构建。本文是基于win环境搭建的webpack，以前的同事写的入门指南是webpack3.0版本，最近想用webpack却发现它已经更新到了4.1.x，于是遇到了几个坑，也为了给想入门webpack的小伙伴提供个方便，重新写一份入门指南。什么是webpack？Webpack 是当下最热门的前端资源模块化管理和打包工具。它可...
浅谈webpack和webpack-cli模块源码分析
10-15
webpack 4与webpack 3相比，在执行方式上有所变化，webpack 4引入了webpack-cli，后者在webpack 3中是合并在webpack中的。 当我们在系统中安装了webpack模块之后，会在node_modules/.bin目录下生成webpack和webpack...
webpack4使用webpack-dev-server报错 热更新报错
qq_34200636的博客
01-25 1016
webpack4使用webpack-dev-server报错
webpack-dev-server --open报错/vue ui 打开浏览器报错
Ice_ssj的博客
10-10 739
先给出标题两种报错的截图 webpack脚本"webpack-dev-server"添加open报错 脚本代码： "scripts": { "dev": "webpack-dev-server --host 127.0.0.1 --port 8888 --open" } 报错截图： 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置
Vue webpack-dev-server热更新失败
lizhenqii的博客
10-17 4127
Vue webpack-dev-server热更新失败 今天踩了一个坑，就是webpack-dev-server热更新失效 或者说vue-cli脚手架热更新失效，记录一下。 错误原因： 在页面中引入一个组件，然后把组件的父级目录名开头字母写成大写（原本是小写的），但是没有报引入失败，但是webpack监听不了文件的更新。如下： // 正确引入方法 import ComA from '@/compo...
webpack4 源码分析(二) webpack-cli
林中路
04-21 2655
webpack4 源码分析(二) webpack-cli 上一篇我们分析了webpack4的入口，发现最后都是调用了 webpack-cli 这个工具包，本篇将对这个工具包里进一步发生的事情进行分析。 cli.js 这是webpack-cli 的入口文件，我们来看下它的基本结构 (function (){ const importLocal = require("import-local");...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
由于本例使用的是Webpack 4，因此需要安装webpack、webpack-cli以及webpack-dev-server等。 3. 配置Webpack，其核心是webpack.config.js文件。该文件需要引入path模块，并且设置入口(entry)和输出(output)等基本...
webpack-cli:webpack-cli
05-11
webpack-dev-server提供了一个本地开发服务器，自动处理文件变更并实时刷新，配合`--hot`选项，可以实现热模块替换。 **9. 性能优化** Webpack CLI提供了各种性能提示和优化选项，如`--display-chunks`显示Chunk...
vue项目中的webpack-dev-sever配置方法
08-28
在Vue项目中，通常使用`vue-cli` 创建项目，`vue-cli` 已经默认配置了`webpack-dev-server`，但有时我们需要根据需求进行定制化配置。 1. **配置文件位置**： 在Vue项目中，`webpack-dev-server` 的配置通常位于`...
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server
02-05
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ，它提供对webpack资产的快速内存访问。目录入门首先，安装模块： npm install webpack-dev-server --save-dev 注意：...
webpack-dev-server启动报错Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_40285497的博客
11-13 350
这个错误可能最近你们都会看到，那很大原因就是你们看的是中文官网，你可以看看英文官网。 之前package.json配置如下 "script": { "start": "webpack-dev-server --open" } 然后执行就报错了，英文官网配置如下 "script": { "start": "webpack serve --open" } ...
关于 webpack-cli4.0 及以上版本 和 webpack-dev-server 之间的依赖报connot find module “webpack-cli/bin/config-yargs”
Baron的技术blog
11-09 4394
之前我写过一篇博客，解决的办法是对 webpack-cli 进行降级处理，不过目前又有了新的解决方案。 新的解决方案 在 webpack 官网上可以看到依赖的下载与设置方法没有改变，启动命令发生了改变。 直接 webpack serve --open，就可以了。 依赖关系 依赖 版本 新版本 webpack 4 5 webpack-cli 3 4 webpack-dev-server 3 3 之前的依赖关系是 webpack-dev-server 依赖于 webpack-cl.
webpack和vue cli 4.4.4的概念理解及搭建
yanhua1575的博客
06-14 2710
1.webpack 1.1概念 官方文档解释： At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块和打包的概念上理解就是： webpack中的模块化 webpack其中一个核心就是模块化开发，并且处理模块间的依赖关系。不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中
关于webpack-dev-server和webpack4.x配置热更新&jsonp无刷新
Amethyst的博客
02-03 483
学webpack以来折腾最久的一次bug… 安装webpack-dev-server（在此之前要先完成webpack基本配置，不再赘述） yarn add webpack-dev-server -D 此时出现警告如下： 原因是chokidar 2和fsevents 1版本过低，node.js版本在14以上时将会报此错，接下来，用npm upgrade升级（先要保证安装了npm upgrade） npm-check 检查更新: npm install -g npm-check npm-upgrade
关于webpack-cli4.0的相关配置（三）
是大林的林吖-博客
05-12 278
配置多环境变量 package.json 里的 scripts 配置 dev build等，来执行不同环境 通过 npm run dev启动本地 , 执行 development 通过 npm run build 打包正式 , 执行 production 配置介绍 可以在vue.config.js里通过console.log(process)查看具体配置信息 常用的配置 process.env.NODE_ENV 会是 “development”、“production” 或 “test” 中的一个。
关于webpack-cli4.0的相关配置（二）
是大林的林吖-博客
05-11 549
注意：从cli3.0 开始，Webpack的配置文件从webpack.config.js变为了 vue.config.js 更多配置信息参考地址 （1）publicPath Type：string Default： ‘/’ 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设
webpack4配置新手教程
bob的博客
08-05 610
1.初始化项目 先创建一个webpackDemo文件夹，切换进去执行如下命令， npm install --save-dev webpack-cli@4.4.0 2.基本概念 1. 入口(entry) Webpack 执行构建的第一步将从 Entry 开始，可理解为输入。 2. 输出(output）输出结果，在 Webpack 经过一系列处理后输出的配置 3. loader （模块转换器） 4. 插件(plugins) 扩展插件，在 Webpack对文件处理的扩展处理 3.配置webp
webpack@4的基础入门学习笔记
Maui1027的博客
08-03 324
使用webpack 的内置插件 DefinePlugin来配置变量//开发环境 plugins : [ new DefinePlugin({IS_DEV : 'true' }) ] , //生产环境 plugins : [ new DefinePlugin({在 src目录中可以全局访问这个变量。
vue.js学习笔记二十 一—— webpack-dev-server的常用命令与配置方式
武汉小喽啰
07-14 552
1. 命令配置方式一：直接在webpack-dev-server后面追加参数（推荐方式） 1. 编译之后自动打开页面 通过 --open 来实现 例如："dev":"webpack-dev-server --open" 注意：修改package.json文件之后，需要重启webpack-dev-server 2. 修改端口号 通过 --port 来实现 例如："dev":"webpa...
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、付费专栏及课程。

余额充值