webpack-dev-server的指令与配置项

最新推荐文章于 2024-05-19 11:09:24 发布
原创 最新推荐文章于 2024-05-19 11:09:24 发布 · 607 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过修改package.json文件中的命令来实现Webpack自动打开浏览器、指定端口及内容基目录等功能，同时提及了热更新的配置方法。

1、修改项目中的package.json来实现自动打开网页，修改端口等操作

"dev" : "webnpack-dev-server --open" //npm run dev后自动打开网页
"dev" : "webnpack-dev-server --open --port 3000" //npm run dev后自动打开网页并且端口为3000
"dev": "webpack-dev-server --open --port 3000 --contentBase src"//npm run dev后自动打开网页并且端口为3000并且进入的是src下的页面当中，而不是原来的根目录展示页
"dev" : "webnpack-dev-server --hot" //npm run dev开启热更新功能(不开启的话，每次提交代码后，会重新生成一份新的文件，而开启热更新功能，只是对原来的文件进行修改，并且网页不会进行重载刷新)

2、在webpack.config.js中进行操作(不推荐)

webpack服务器启动设置
我心坚持
08-26 1309
1、安装webpack服务器：npm i webpack-dev-server -d 2、 配置服务器，如下图： 3、安装完成后启动服务器：npm run dev 4、完成；修改里面的内容，浏览器会自动修改样式等 已从根目录启动服务器，所以引入文件可以直接从根目录引入。 在json文件中不能写注释；会提示错误 json文件需要用逗号隔开，否则会报错红色提示；json中的键和值对必须都要加双引号。 “dev”: “webpack-dev-server --open --port 3000 --co
webpack-dev-server实现项目热部署
ZZY1078689276的专栏
11-10 2753
文章目录webpack-dev-server作用修改源码 webpack-dev-server作用   我们在修改了项目代码以后需要不断的重新执行webpack命令，重新打包然后回到浏览器去刷新页面，这种开发效率很低下，所以说为了省去这部分没必要的操作，因而我们在这里要使用webpack-dev-server来实现当代码更新时项目的自动打包发布，刷新浏览器页面的操作。   这一篇文章是在上一篇文章...
webpack-dev-server的命令参数
程序员徐小白的博客
02-13 1538
1.基本命令：webpack-dev-server 加在package.json中scripts对象中 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server ！！！！！加在这里！！！！！", "build": "webpa...
webpack命令的使用
m0_56232007的博客
07-26 293
webpack命令 想要有webpack命令，那么我们需要全局安装，但是！！！！如果全局安装无法适应所有的项目，那么我们就可以只在项目中安装，利用package.json中scripts调用对应命令 因此，我们要在对应的项目中进行安装 npm i webpack --save 同时需要安装 webpack-cli 如果没有安装则自动提示，建议在安装webpack时，同时安装webpack-cli，使用下面命令即可 npm i webpack webpack-cli --save 安装到本地后，去pack
webpack-dev-server
webpack-dev-server
07-25 1042
## webpack-dev-server ## webpack-dev-server是nodejs的一个插件，可以在本地起动web服务，可以做反向代理。  package.json 命令       "scripts": {     "dev": "webpack-dev-server    --config  webpack.prod.conf.js",     //webpack.p...
webpack-dev-server常用的命令参数和两种配置方式
u012758488的博客
09-09 1016
如图： //--open一启动就打开浏览器 //--port8888指定端口 //--contentBasesrc指定运行的根路径 //--hot热部署
ruoyi webpack-dev-server --config ./config/webpack.server.js 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
最新发布
02-26
devServer: { port: 9093, open: true }, }; ``` 以上更改能够确保每次启动时自动打开默认浏览器并监听指定端口上的请求。 最后再次尝试启动应用，应该不会再看到 “不是内部或外部命令”的提示信息了。
itheima-admin@1.0.0 dev > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
12-29
### 解决 `webpack-dev-server` 不是内部或外部命令的问题 当遇到 `webpack-dev-server` 不是内部或外部命令的错误时，通常是因为 Webpack 或其开发服务器未被正确安装到全局路径或本地项目环境中。以下是详细的...
webpack-dev-server permission denied
01-16
### 解决 `webpack-dev-server` 权限被拒绝错误的方法 当遇到 `.bin/webpack-dev-server permission denied` 的提示时，这通常意味着当前用户没有足够的权限来执行该文件。以下是几种可以尝试的解决方案： #### ...
npx webpack-dev-server后都报的哪些恶心错误（各类版本不符）
elephant230的博客
05-13 1814
webpack4的各项版本匹配
webpack学习—— webpack-dev-server(2)常用命令参数
高贵的程序媛
10-11 514
格式：空格 – 参数名 webpack-dev-server 常用命令参数： open：是否自动开启浏览器，默认：false，当设置为true，开启dev-server服务的时候，会自动在浏览器打开项目。 port ：端口号 默认：8080 可以单独设置服务器的端口号，如果默认的8080被占用的情况，这个配置就派的上用场啦。 contentBase：定义开启服务器的文件夹，默认：当前项目根目...
webpack2教材--2webpack 介绍&常用命令&webpack-dev-server
qq_40899714的博客
02-14 302
webpack 介绍&常用命令&webpack-dev-server 介绍 Webpack是一款用户打包前端模块的工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等 特点： 代码拆分 W...
webpack教程02-webpack-dev-server是什么与webpack-dev-server命令行使用
fitzleopard的博客
06-16 1084
本文首发于我的Github博客 本文是webpack教程的第二篇文章，会介绍: webpack-dev-server的概念和作用 webpack-dev-server的基本命令行使用和一个坑点 本次相关代码在Github仓库 commit bbaea1bc webpack-dev-server的概念与作用 概念 webpack-dev-server，顾名思义，这是一个server，也就是说，webpack-dev-server命令能够用来启动一个本地服务器，接受HTTP请求 作用 不使用webpack
webpack --- webpack-dev-server常用指令
bylifan的博客
08-13 251
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" --open 自动打开浏览器到根目录 --port 3000 用哪个端口打开 -- contentBase src 自动跳转根目录下某个目录 --hot 代码每次保存会重新生成文件存在内存里面，这条指令加上可以让更新的内容变成一个补丁，没更新...
vue运行npm run dev报错：‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序
fengzhishay的博客
04-26 7561
1、我先从git上拉到前端代码后，根据readme文档要求我执行了如下命令，下载依赖 npm install -g cnpm --registry ip地址:端口 值得注意的是，上面命令参数 -g 是下载全局依赖，不会将依赖下载到node_modules文件中去。因此，不会产生node_modules文件。 2、下载依赖成功后，我执行npm run dev 时报错：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 3、我百度了一波，有一种说法说：是因为nod..
webpack-dev-server配置命令的第2种方式
ADLF
01-03 872
在webpack.config.js中配置，相对来说麻烦些； 热更新第二步：导入webpack模块； 第三步：配置插件节点；                      
webpack学习笔记（五）—— webpack-dev-server如何自动打开浏览器
qq_37899792的博客
03-21 3118
在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 648
然后就会发现权限不够，然后又会报错，所以请大家到安装node的文件下修改相应的权限，不然就会发现打开管理员模式就操作不了对应的项目，打开项目就是权限不够，记得赋予Users最高权限哦，就是勾选“完全控制”然后大家再回去使用npm install命令就可以创建node_modules文件命令啦，紧接着大家直接跑，就成功啦。我出现的这个问题可能会比较逆天。
查看webpack版本_webpack 上
weixin_39721009的博客
12-11 1980
版本webpack@4安装方法在官网，在webpack后面加个 @4即可学会看文档，如果webpack升级到5了，也可以使用同样思路官网 https://webpack.js.org/使用 npm 或者 yarn// npm npm info webpack version // 查看 webpack 版本号 npm info webpack // 查看 webpack 所有信息 npm in...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值