我们在上篇文章提及到：在webpack.config.js中配置watch:true，可以检测文件改变，进行打包。还有本篇文章介绍的devServer可以实现。
本篇文章，我们介绍下devServer的安装配置，使用devServer进行项目开发。（更推荐使用devServer）devServer为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。
首先我们需要知道，devServer是依赖webpack的。我们肯定需要先安装webpack,然后安装devServer到当前项目。
cnpm i webpack-dev-server -D然后，我们在package.json文件中配置脚本执行命令
"scripts": { "bulid": "webpack --config webpack.production.js", "dev":"webpack-dev-server" }命令台执行即可打包项目。
npm run dev
我们可以看到，项目运行在http://localhost:8080/。
其次：我们要注意的是：webpack output is served from /。打包输出的文件在服务器的内存里。文件名：bundle.js
之前我们打包输出的文件是在：dist/目录下。
所以：我们要修改index.html的文件引入路径：
之前是：<script src="./dist/bundle.js" ></script>。改为：<script src="/bundle.js" ></script>
否则，你会发现你改变的index.js文件里面的内容，并不能展现出来。
我们继续配置命令行，修改后需要重新执行：npm run dev
"dev":"webpack-dev-server --port 8080"
//--port修改端口号为8080
"dev":"webpack-dev-server --port 8080 --hot"
//--hot开启热加载。怕孤独的马里奥修改文件后，直接保存后，你浏览器打开的项目就会自动刷新。
"dev":"webpack-dev-server --port 8080 --hot --open"
//--open执行npm run 命令后会自动打开浏览器。
ps：以上配置内容写法，现在在新版本的webpack中，可以直接在，webpack.config.js中直接进行配置。如下：
devServer:{ open:true, hot:true, port:8080, }而package.json的文件直接是：
"scripts": { "bulid": "webpack --config webpack.production.js", "dev":"webpack-dev-server" }这样也是可以的。。。哈哈，写完啦。
下篇：（四），webpack-loader详解