关于webpack-dev-server中设置打开文件的浏览器和相应页面的问题

最新推荐文章于 2024-05-19 11:09:24 发布
最新推荐文章于 2024-05-19 11:09:24 发布
阅读量508 收藏 1
点赞数
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69805573/article/details/132138405
版权

在配置webpack-dev-servr时，对webpack配置文件中devServer中的属性进行设置后

devServer属性如下

发现用原来script中给“dev”绑定的“webpack serve --open”无法正确打开相应的页面和对应的浏览器

需要将“dev”绑定的“webpack serve --open”改为“webpack serve --open-app-name='chrome'”，

devServer对象的属性和package.json中的绑定命令都要更改

如果只改命令不改devServer对象会不打开浏览器

如果只改devServer对象不改绑定的命令会在默认浏览器打开，也无法打开devServer对象配置的要打开的页面

同时更改就可以正确的打开devServer配置的相应的页面和对应的浏览器

 

*56
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端工程化--webpack配置和脚手架的简单应用
Depressione的博客
11-12 301
前端工程化 也可以叫做前端模块化。首先先了解对比一下传统开发的主要问题： 命名冲突问题：多个js文件之间如果有重名的变量，则会发生覆盖问题 文件依赖问题：js文件之间无法实现相互的引用 为了解决传统开发的问题，所有出现了模块化的方案： 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 webpack webpack是一个流行的前端项目构建工具（打包工具）
webpack-使用webpack-dev-server.rar
04-12
然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...
webpack学习笔记（五）—— webpack-dev-server如何自动打开浏览器
qq_37899792的博客
03-21 2997
在package.josn里面 配置scripts中的dev命令 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open: 自动打开浏览器 --port 3000: 指定打开时的端口号 --contentBase src: 打开项目的主页面 --hot: 热更新 给bundle.j...
npm run dev时出现＞ webpack-dev-server --open ‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
最新发布
2303_76332106的博客
05-19 361
然后就会发现权限不够，然后又会报错，所以请大家到安装node的文件下修改相应的权限，不然就会发现打开管理员模式就操作不了对应的项目，打开项目就是权限不够，记得赋予Users最高权限哦，就是勾选“完全控制”然后大家再回去使用npm install命令就可以创建node_modules文件命令啦，紧接着大家直接跑，就成功啦。我出现的这个问题可能会比较逆天。
webpack-dev-server打开指定浏览器
jhjyfjy的博客
05-18 777
webpack devServer 启动成功，但是打开页面http://localhost:8080/只加载了html没有加载js、图片、css
phi1111的博客
04-11 789
解决方法3：filename不改，在devServer中添加 static: "./dist",这样在访问http://localhost:8080/时可以打开dist下的目录，再点击app.html即可访问。但是打开http://localhost:8080/默认加载未编译的index.html而不是编译好的app.html。解决方法2：在地址栏中手动访问http://localhost:8080/app.html。filename改为。
【学习笔记】webpack-dev-server中配置自动打开谷歌chrome浏览器的方法
oleself的博客
09-19 636
关于webpack的学习内容。
webpack-dev-server自动更新页面方法
11-26
为了使 Webpack Dev Server 能够监听这些文件的变化并自动更新页面，你需要在配置文件中设置 `publicPath`： ```javascript module.exports = { // ... output: { path: path.resolve(__dirname, 'dist'), // ...
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server
02-05
目录入门首先，安装模块： npm install webpack-dev-server --save-dev 注意：虽然可以全局安装和运行webpack-dev-server，但建议在本地安装。 webpack-dev-server将始终在全局安装中使用本地安装。用法有两种主要的...
浅谈webpack-dev-server的配置和使用
08-27
本篇文章主要介绍了浅谈webpack-dev-server的配置和使用，包括安装、配置dev-server、配置webpack.config.js文件、配置devServer、创建HTML页面和启动webpack-dev-server等步骤。希望对大家的学习有所帮助。
webpack-dev-server 自动打开浏览器失败原因及解决方法
m0_69301850的博客
05-31 653
这里记录下我踩到的坑，package.json 配置--open仍不能自动打开浏览器 报错信息： <w> [webpack-dev-server] Unable to open "http://localhost:8080/" page. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-targ.
让webpack-dev-server启动服务时自动打开浏览器
pon的博客
03-26 5791
最近用vue-cli脚手架安装vue模板后，使用npm run dev发现服务运行后不能自动打开浏览器，查看了一下package.json文件，里面的部分内容如下： "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "np......
webpack-dev-server 打开指定浏览器的正确方式
dehobo的专栏
03-26 1194
用的Mac电脑开发，浏览器默认是Safari，但是调试不太方便。 使用vue-cli 创建了项目，webpack-dev-server缺省设置是打开的默认浏览器，怎么改？于是乎找度娘，搜索出一堆结果： 结果基本上都是这样： image 按照修改，然并卵，但是得到一个信息，webpack-dev-server 打开浏览器是用 opn 实现的，于是去看webpack-dev-server ...
webpack.config.js中webpack和webpack serve --open的区别
weixin_48975022的博客
04-16 232
webpack和都是运行Webpack进行构建的命令，但它们的区别主要体现在两个方面：用途和功能。
webpack5 devServer配置默认打开的浏览器方法
weixin_51332452的博客
08-08 817
Webpack5 devserver配置默认浏览器的方法，版本更新，方法和以前不太一样
webpack（四） js 浏览器兼容
Yushia的博客
04-06 1593
对于es6语法，一些浏览器或者低版本浏览器是不兼容的，因此需要项目在打包编译的时候自动将es6语法转换成es5。
webpack-dev-server默认打开指定chrome浏览器的方式
gwdgwd123的博客
10-12 8371
webpack-dev-server 打开指定浏览器的正确方式 2019.03.26 00:14:44字数 201阅读 835 用的Mac电脑开发，浏览器默认是Safari，但是调试不太方便。 使用vue-cli 创建了项目，webpack-dev-server缺省设置是打开的默认浏览器，怎么改？于是乎找度娘，搜索出一堆结果： 结果基本上都是这样： image 按照修改，然并卵，但...
webpack-dev-server自动打开chrome浏览器的方式
H_xiang_xiang的博客
06-24 1287
不做 chrome配置的话，自动打开Edge浏览器 按如下配置指令 ... "scripts": { "dev": "webpack-dev-server --progress --open chrome --port 8888 --content-base src", }, ... –progress --open chrome：自动打开chrome –port 8888：自定义端口 –content-base src：设置打开位置 ...
webpack-dev-server
08-25
webpack-dev-server 是一个用于开发环境的轻量级服务器，它与 webpack 模块打包工具结合使用，提供了实时重新加载（live reloading）和热模块替换（hot module replacement）等功能，使得在开发过程中可以快速地预览和调试应用程序。 通过 webpack-dev-server，你可以在本地启动一个服务器，并且监听指定的端口。当你修改了源代码文件时，webpack-dev-server 会自动重新编译并刷新浏览器，使你能够即时看到修改后的效果。同时，它还支持热模块替换，即在不刷新整个页面的情况下，只替换发生改变的模块，从而提高开发效率。 要使用 webpack-dev-server，你需要先安装 webpack 和 webpack-dev-server： ``` npm install webpack webpack-dev-server --save-dev ``` 然后，在 webpack 配置文件中配置 devServer 选项： ```javascript module.exports = { // ...其他配置项 devServer: { contentBase: path.join(__dirname, 'dist'), // 设置服务器从哪个目录提供内容 compress: true, // 启用 gzip 压缩 port: 9000, // 指定服务器监听的端口号 }, }; ``` 最后，在 package.json 文件中添加一个脚本命令以启动 webpack-dev-server： ```json { "scripts": { "start": "webpack-dev-server --open" } } ``` 通过运行 `npm start` 命令，就可以启动 webpack-dev-server，并在浏览器中打开应用程序。每次修改源代码后，都会自动重新编译并刷新页面。这样，你就可以方便地进行开发调试了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值