webpack-dev-server

每一次手动打包很麻烦，而且即便有--watch也不方便，还需要自己手动刷新浏览器，所以webpack给你提供了一个工具：webpack-dev-server

它就可以实现监视代码改变，自动打包，打包完毕自动刷新浏览器的功能

安装：

npm i -D webpack-dev-server

注意： webpack-dev-server 3.0及以上版本不再支持4.0版本以下的webpack，所以这里我们安装2.9版本的webpack-dev-server

配置：

devServer:{
        //配置webpack-dev-server 的www目录
        contentBase:'./dist'
    }

配置npm scripts：

"scripts": {
    "build": "webpack",
    "watch-build": "webpack --watch",
    "dev": "webpack-dev-server --open"
  }

启动开发模式：

npm run dev

解释：该工具会自动帮你打包，打包完毕之后会自动开启一个服务器，默认监听8080端口号，同时自动打开浏览器让你访问，接下来就会自动监视代码的改变，然后自动编译，编译完毕，自动刷新浏览器。