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/，复制去浏览器打开即可。