webpack-dev-server的使用
2024-10-21 02:45:17
1.安装
npm install webpack-dev-server --save-dev
ps:为保证webpack-dev-server能正常运行,请确认在本地项目中下载了webpack的包,可以通过package.json来查看有无下载
2.运行
1.使用npx命令运行
npx webpack-dev-server
2.使用npm运行
1.首先配置package.json
//在script内新增dev键
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev":"webpack-dev-server --open --contentBase dist --hot"
},
//参数说明
/*
--open 执行命令时自动打开页面
--contentBase dir 打开时显示的文件
--hot 每次更新资源文件,不用更新所有资源,只更新部分,相当于加了一个补丁。
*/
2.运行命令
npm run dev
3.修改引用包文件的页面文件(*.html)
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<!-- 这里的路径要修改成根目录下,因为webpack-dev-server会生成一个虚拟的的包文件,位于根目录下 -->
<script src="/bundle.js"></script>
</body>
</html>
最新文章
- 编写高质量代码:改善Java程序的151个建议(第2章:基本类型___建议26~30)
- Python解析非标准JSON(Key值非字符串)
- 如何查看前端部署的tracker代码
- POJ1129Channel Allocation[迭代加深搜索 四色定理]
- codeforces 709D D. Recover the String(构造)
- AndroidManifest修改重打包全过程
- 什么是hibernate?
- iOS开发之loadView、viewDidLoad及viewDidUnload的关系
- ORACLE中使用SQL的正则表达式判断邮箱格式
- vb.net 操作xml
- C和C++安全编码读书笔记1
- JSP中使用cookie存储中文
- [转]CentOS Apache 性能调试!
- 认识JWT
- MongoDB存储引擎选择
- 《JAVA编程思想》第四版 PDF
- C++反转单链表
- [skill] vim 操作多个window
- Revit API找到风管穿过的墙(当前文档和链接文档)
- windows系统上安装与使用Android NDK r5