首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

webpack --监视&& http-server./dist -p 8080 --cors -o不工作

问题:webpack --监视&& http-server./dist -p 8080 --cors -o不工作

回答:

这个问题涉及到前端开发中使用webpack进行打包和使用http-server进行本地服务器部署的情况。下面我会分别解释这两个命令的作用和可能出现的问题。

  1. webpack --监视: webpack是一个现代JavaScript应用程序的静态模块打包工具。它主要用于将各种资源(如JavaScript模块、样式表、图片等)打包成静态文件,以供浏览器加载。webpack的监视模式(watch mode)可以实时监听文件的变化,并在文件发生改动时自动重新打包。

可能出现的问题:

  • 检查是否正确安装了webpack和相关依赖。
  • 检查webpack配置文件(通常是webpack.config.js)是否正确配置,包括入口文件、输出路径等。
  • 确保命令中的路径和文件名是正确的。
  1. http-server./dist -p 8080 --cors -o: http-server是一个简单的零配置命令行HTTP服务器,用于快速部署静态文件。它可以将指定目录下的文件作为静态资源提供给浏览器访问。

可能出现的问题:

  • 检查是否正确安装了http-server。
  • 检查命令中的路径是否正确,确保指定的目录下存在要提供的静态文件。
  • 确保端口号(-p参数)没有被其他进程占用。
  • 确保命令中的参数是否正确,如--cors用于启用跨域资源共享,-o用于自动在浏览器中打开网页。

综合考虑:

如果webpack --监视命令没有报错,但http-server命令无法正常工作,可能是http-server的配置或参数设置有问题。建议检查http-server的相关文档或使用帮助命令(如http-server --help)查看正确的用法和参数配置。

腾讯云相关产品推荐:

  • 对于前端打包部署,腾讯云提供了云开发(CloudBase)服务,可以快速部署静态网站和前端应用。详情请参考:腾讯云云开发
  • 对于静态文件存储和分发,腾讯云提供了对象存储(COS)服务,可以存储和分发各种静态资源。详情请参考:腾讯云对象存储

注意:以上推荐仅为示例,实际选择云计算服务商和产品应根据具体需求和实际情况进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WebpackWebpack4.x 常用操作 | 案例 | 相关构建工具

webpack安装在本地 npm i -D webpack 注意: 推荐使用全局安装 超过4.0的webpack版本,需要额外再安装一个webpack-cli 命令行工具 npm install --...工具库写一个小测试:首先先安装 开发依赖 loadsh 工具库 npm i lodash -P lodash 参考:https://www.lodashjs.com/ 然后在````index.js`...watchOptions: { // 监视文件相关的控制选项 poll: true, // webpack 使用文件系统(file system)获取文件改动的通知。...插件 contentBase: path.join(__dirname, "dist"), // 告诉服务器从哪里提供内容, 默认情况下,将使用当前工作目录作为提供内容的目录 compress...watchOptions: { // 监视文件相关的控制选项 poll: true, // webpack 使用文件系统(file system)获取文件改动的通知。

23410

webpackwebpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

[前言]:因为最近在搞****API的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包,而没有把它纳入到项目开发的“主体过程”中来...然后进入默认的localhost:8080页面: ? 服务器的根目录就是我们工程的目录 到这里,我们要做的第一步就成功啦! 进入dist后,我们发现报了这样一段错误: ? what?...——它指定了服务器资源的根目录,如果写入contentBase的值,那么contentBase默认是项目的目录。...目录下新增一个HTML页面: /*剩下的都是很常规的HTML内容,故省略*/ 这里是404界面 我们把webpack.config.js修改如下: module.exports = { /...http://localhost:8080/"); var compiler = webpack(config); var server = new WebpackDevServer(compiler,

2K70

大厂前端面试考什么?

/dist/vendor-manifest.json'), }) ]}(4)代码压缩在 Webpack3 中,一般使用 UglifyJS 来压缩代码,但是这个是单线程运行的,为了加快效率,可以使用...,就可以使用该属性让 Webpack 扫描该文件,这种方式对于大型的类库很有帮助setTimeout 模拟 setInterval描述:使用setTimeout模拟实现setInterval的功能。...(2)Pending callbacks:执行推迟到下一个循环迭代的I / O回调(系统调用相关的回调)。(3)Idle/Prepare:仅供内部使用。...否则会阻塞并等待任何正在执行的I/O操作完成,并马上执行相应的回调,直到所有回调执行完毕。...反向代理:服务器为了能够将工作负载分不到多个服务器来提高网站性能 (负载均衡)等目的,当其受到请求后,会首先根据转发规则来确定请求应该被转发到哪个服务器上,然后将请求转发到对应的真实服务器上。

1.2K20

简单的零配置命令行 http 服务器--http-server入门

而基于http协议的http-server就是一个不错的选择 2、处理页面跨域 当页面含有跨域的请求,此时可以利用http-server,使用命令 http-server -p 8080 -P https...://abc.org //-p 本地运行端口 -P 将所有无法在本地解析的请求代理到给定的URL进行处理 3、验证前端页面是否打包正常 现在的项目很多都前后端分离的架构,前端通常会打包dist文件丢到测试或者其他环境...,我们可以利用http-server来跑下打包的dist目录内容,验证打包的内容是否正确 安装 安装的前置条件 因为http-server依赖node.js,因此在安装之前,请确保安装的环境已经装有node.js...--port要使用的端口(默认为8080) -a 要使用的地址(默认为0.0.0.0) -d显示目录列表(默认为true) -i显示autoIndex(默认为true) -g或者--gzip当启用(默认为...-e或者--ext如果没有提供默认文件扩展名(默认为html) -s或者--silent从输出中抑制日志消息 --cors通过Access-Control-Allow-Origin标头启用CORS -o

75020

美团前端常见面试题整理_2023-02-23

CORS需要浏览器和服务器同时支持,整个CORS过程都是浏览器完成的,无需用户参与。因此实现CORS的关键就是服务器,只要服务器实现了CORS请求,就可以跨源通信了。...否则会阻塞并等待任何正在执行的I/O操作完成,并马上执行相应的回调,直到所有回调执行完毕。.../dist/vendor-manifest.json'), }) ] } (4)代码压缩 在 Webpack3 中,一般使用 UglifyJS 来压缩代码,但是这个是单线程运行的,为了加快效率...,就可以使用该属性让 Webpack 扫描该文件,这种方式对于大型的类库很有帮助 如何减少 Webpack 打包体积 (1)按需加载 在开发 SPA 项目的时候,项目中都会存在很多路由页面。...孤儿进程将被init进程(进程号为1)所收养,并由init进程对它们完成状态收集工作

1.8K10

【.NET Core 3.0】框架之十二 || 跨域 与 Proxy

p=8 一、为什么会出现跨域的问题 跨域问题由来已久,主要是来源于浏览器的”同源策略”。 何为同源?只有当协议、端口、和域名都相同的页面,则两个页面具有相同的源。...localhost:1818 是不一样的,尽量写两个 policy .WithOrigins("http://127.0.0.1:1818", "http://localhost:8080...因为这两个都是涉及到 Http请求的,如果你跨域就直接转发或者mvc,那肯定报错。...1、Nginx的代理工作原理 反向代理(Reverse Proxy)方式是指以代理服务器来接受 Internet上 的连接请求,然后将请求转发给内部网络上的服务器;并将从服务器上得到的结果返回给 Internet...3、webpack 本地代理 —— dev 环境的一大神器,只需在 webpack 中三行配置,即可代理到本地,只能在本地,大弊端,不过如果是本地开发的话,推荐使用 ❤❤❤。

1.2K20

webpack fetch 提示错误 No Access-Control-Allow-Origin header is present on the requested resource.

Origin 'http://localhost:8080' is therefore not allowed access....CORS disabled....导致无法从网络获取数据,现在很多接口都是 json 或 jsonp 的方式,如果不能用 fetch 或者一些网络请求的方法,简直太受罪了,有些朋友的解决方法是把数据放到自己的服务器上来处理,这莫名的是给自己增加工作量...,直到我看到了这篇文章,终于将这个难题解决:http://www.jianshu.com/p/19a6aefca350 根据文章的提示,我在 webpack 的配置文件中,增加了我常用的一些数据请求的地址...: 图片 随后在请求数据的时候,根据文章的提示将源地址修改为 localhost:8080 便顺利的解决了问题。

32310

简单的零配置命令行 http 服务器--http-server入门

而基于http协议的http-server就是一个不错的选择 2、处理页面跨域 当页面含有跨域的请求,此时可以利用http-server,使用命令 http-server -p 8080 -P https...://abc.org //-p 本地运行端口 -P 将所有无法在本地解析的请求代理到给定的URL进行处理 3、验证前端页面是否打包正常 现在的项目很多都前后端分离的架构,前端通常会打包dist文件丢到测试或者其他环境...,我们可以利用http-server来跑下打包的dist目录内容,验证打包的内容是否正确 安装 安装的前置条件 因为http-server依赖node.js,因此在安装之前,请确保安装的环境已经装有node.js...--port要使用的端口(默认为8080) -a 要使用的地址(默认为0.0.0.0) -d显示目录列表(默认为true) -i显示autoIndex(默认为true) -g或者--gzip当启用(默认为...-e或者--ext如果没有提供默认文件扩展名(默认为html) -s或者--silent从输出中抑制日志消息 --cors通过Access-Control-Allow-Origin标头启用CORS -o

3K50

腾讯前端一面常考面试题_2023-03-13

newObj[key] = obj[key]; } } return newObj;}事件传播机制(事件流)冒泡和捕获参考 前端进阶面试题详细解答HTML5的离线储存怎么使用,它的工作原理是什么离线存储指的是...CORS需要浏览器和服务器同时支持,整个CORS过程都是浏览器完成的,无需用户参与。因此实现CORS的关键就是服务器,只要服务器实现了CORS请求,就可以跨源通信了。...浏览器将CORS分为简单请求和非简单请求:简单请求不会触发CORS预检请求。...+ webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。...开发环境下,vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域。

1K40

滴滴前端二面高频面试题合集

CORS需要浏览器和服务器同时支持,整个CORS过程都是浏览器完成的,无需用户参与。因此实现CORS的关键就是服务器,只要服务器实现了CORS请求,就可以跨源通信了。...浏览器将CORS分为简单请求和非简单请求:简单请求不会触发CORS预检请求。...若该请求满足以下两个条件,就可以看作是简单请求:1)请求方法是以下三种方法之一:HEADGETPOST2)HTTP的头信息超出以下几种字段:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type...+ webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。...宏任务:Script/setTimeout/setInterval/setImmediate/ I/O / UI Rendering微任务:process.nextTick()/Promise 上诉的

1.1K50
领券