3.webpack-dev-server的基本使用

由于在前端开发中，使用webpack，每次更新代码，都需要用到webpack这个命令，因此，为了优化这一块的操作，我们通过webpack-dev-server来实现自动打包编译的功能。

1.安装

npm i webpack-dev-server -d

2.安装完毕之后，webpack-dev-server的用法和webpack的用法是一样的。
3.由于在项目当中，我们是直接在本地项目中安装的webpack-dev-server，不能像webpack或者node（全局安装-g）那样直接当作脚本命令来进行使用，所以需要在本地项目中安装webpack。

webpack i -d

4.webpack-dev-server会根据webpack.config.js，直接生成一个bundle.js文件托管于电脑内存中，并不会在项目根目录直接生成一个bundle.js文件。（可以直接认为是在根目录生成了一个虚拟的bundle.js文件）。

5.在项目packge.json中添加启动项目的命令。

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

这时启动项目可直接在命令行输入 npm run dev
后面以--开头的参数为项目执行webpack-dev-server后的一些默认操作。
例：--open 执行后直接打开页面 ，--port 3000 规定端口号为3000，--contentBase src 页面打开后的页面开始路径，--hot 实现浏览器无刷新重载（css样式设置时）