webpack-server-dev配置出现的问题

最新推荐文章于 2024-04-07 11:49:33 发布
最新推荐文章于 2024-04-07 11:49:33 发布
阅读量1.2k 收藏 1
点赞数 2
文章标签： webpack javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43466258/article/details/124838933
版权 
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.        
 - options has an unknown property 'inline'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

出现上面那个问题，和config文件配置有关
json文件中webpack和脚手架还有server的版本

"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"

然后通过下面这个网址可以发现，可能是我们配置config的时候很多东西都被抛弃了，所以添加进去会出现问题
https://webpack.js.org/configuration/dev-server/
下面这样配置就ok啦

devServer: {
    // contentBase: "./dist",
    static: {
      //本地服务器所加载的页面所在的目录
      directory: path.join(__dirname, "./dist"),
    },
    compress: true,
    port: 9000,//端口号
  },

在这里插入图片描述

希里耳湫
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack-dev-server自动更新页面方法
11-26
这两天在看webpack，今天卡在webpack-dev-server上了，折腾了一下午，一直无法正常运行，每次服务器也提示正常启动了，但是浏览器一输入localhose:8080/admin就提示Get/…,反正就是无法打开页面。最后找到一个帖子，发现原来是我启动服务器的代码有问题。 先安装webpack相关组件 cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev 代码如下： 1.项目结构如下：   2.webpack.config.js配置文件 因为我定义了两个js，所以入口这边要定义两个名称分别打包成两个bund
webpack4升级到webpack5经验总结
m0_37937502的博客
05-26 1万+
最近接手了公司内部webpack相关的依赖包，于是打算优化一波。考虑到webpack5已经正式发布近两年，跟webpack相关的依赖包应该适配的差不多了，于是打算先把webpack4升级到webpack5，然后基于webpack5再进行优化。 升级前用的是 "webpack": "^4.42.1" ，升级后用的是 "webpack": "^5.72.1" 。 笔者采用的升级webpack的方法是先一键升级所有的依赖包，然后一个一个地去解决运行过程中的报错。 首先，全局安装npm-check-updates：
使用react-create-app createProxy创建后端代理一直提示404的解决办法
最新发布
anbang_li的博客
04-07 459
使用文件名注意代理路径问题，可以联合后端响应一起调试。
webpack-dev-server启动报错Invalid options object
youlinhuanyan的博客
11-15 1万+
使用yarn start启动项目时报错 package.json相关依赖如下 "webpack": "^4.43.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.5.0" 报错信息如下： [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that d
m0_61582755的博客
02-18 2847
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
vue2 配置vue.config.js devServer 时报错
cjh16606260986的博客
03-31 468
---------vue.config.js 代码如下---------------------------------------------------------------------------------------'^/api': '' // 思路是如果是开发环境，就给所有要代理的接口统一加上前缀，然后代理请求时再统一通过rewrite去掉。配置vue.config.js devServer 后，启用项目报错。我的处理方法，注释掉这一段，就OK了。
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object
m0_67400973的博客
03-06 1837
问题内容： [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, clien
webpack配置报错Invalid options object. Dev Server has been initialized using an options object that...
m0_46165586的博客
08-21 3852
disableHostCheck是一个用于Vue CLI开发服务器的配置选项，用于禁用对主机检查的验证。在旧版本的Vue CLI中，可以使用这个选项来解决某些特定的网络环境下的配置问题。 然而，在较新的Vue CLI版本（4.x及以上）中，disableHostCheck选项被移除了，并且默认情况下主机检查是启用的。这是因为启用主机检查可以提高开发服务器的安全性，防止潜在的主机劫持攻击。
【webpack】 Dev Server has been initialized using an options object that does not match 报错处理
徐海东的博客
02-04 963
在新版本的webpack-dev-server4.0中，contentBase属性已经被移除了，变成用static替代。contentBase是webpack-dev-server3.0的用法，如果不知道如何由v3升级到v4可以看这篇。npm run start启动本地服务的时候出现。
自动打包插件webpack-dev-server的安装、配置及使用
01-08
webpack-dev-server插件可以实现Webpack的自动打包编译 这样 就不需要每次修改完代码都重新手动输入webpack打包了 2、安装： 在项目的根路径下输入：cnpm i webpack-dev-server -D 将插件安装到项目的本地开发依赖...
使用webpack3.0配置webpack-dev-server教程
08-27
主要介绍了使用webpack3.0配置webpack-dev-server教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中的webpack-dev-sever配置方法
08-28
下面小编就为大家分享一篇vue项目中的webpack-dev-sever配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈webpack-dev-server的配置和使用
08-27
本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
mmwf__的博客
08-24 2万+
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Invalid options object. Dev Server has been initialized...问题解决
热门推荐
weixin_44190874的博客
03-07 2万+
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值