04_09.webpack-dev-server

1. 简介

• 这是一个基于webpack开发工具，可以自动调用webpack打包命令，并启动一台文件服务器
• 当代码发生改变时会自动重新打包，并实现浏览器热更新
• 如果没有该工具，代码每次修改我们都要手动重新打包，刷新浏览器，比较繁琐

2. 安装

全局安装一次：

npm i webpack-dev-server -g

每个项目本地安装：

npm i webpack-dev-server -D

3. 使用

webpack-dev-server --contentBase src --open --port 8888

• --contentBase 指定托管根目录
• --open 自动打开浏览器
• --port 指定服务端口
• --host 指定ip，默认127.0.0.1(localhost)
• 注意：webpack-dev-server打包后的文件会放在内存当中，打包非常快，不用进行磁盘读写

4. 配置命令

• 因为命令通常要加一些参数，写起来较麻烦，可以使用通过配置解决

4.1 . 方式1

• 在package.json项目描述文件中，找到scripts配置项，添加一条脚本配置

"scripts": {
  "dev": "webpack-dev-server --contentBase src --open --port 8888 -d"
}

• 然后通过npm run dev的方式执行命令启动服务

4.2 .方式2

安装好之后直接根目录下输入

webpack-dev-server