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,--,serve,dev,server,start,webpack 来源: https://blog.csdn.net/weixin_41654160/article/details/121090679