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

执行该插件后,我们可以看到下面这样

webpack4实战四--插件使用(webpack-dev-server篇)

可以看到其中的http://localhost:8080/,复制去浏览器打开即可。 

上一篇:Java -26 String什么时候进行值比较,什么时候进行引用比较?


下一篇:03字符串的比较相关方法