webpack4实战四--插件使用(webpack-dev-server篇)
2021/11/1 23:42:19
本文主要是介绍webpack4实战四--插件使用(webpack-dev-server篇),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前面几篇webpack的文章的操作之后,我们还是需要手动打开dist中的html文件才能启动页面,但现在我们要尝试使用命令的方式启动。
首先是安装插件webpack-dev-server
cnpm i -D webpack-dev-server
这个插件不需要像html-webpack-plugin一样在webpack.config.js中导入,安装了便可使用
npx webpack serve
但是,这样写太麻烦了,记住这么多单词挺麻烦的,我们可以在package.json中使用简化的名称,如下,在package.json中配置script属性
{ "name": "01", "version": "1.0.0", "description": "", "main": "a.js", "scripts": { "dev":"webpack serve" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.61.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.4.0" } }
在这里我们配置的是dev代替webpack serve这么一串字符,启动命令如下:
npm run dev
也可以直接将script中的dev写成start,如下
{ ... "scripts": { "start":"webpack serve" }, ... }
写成start的话,启动命令就简单了一些
npm start
执行该插件后,我们可以看到下面这样
可以看到其中的http://localhost:8080/,复制去浏览器打开即可。
这篇关于webpack4实战四--插件使用(webpack-dev-server篇)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享