标签：

为什么要用webpack-dev-server

在开发中，我们都可以发明仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才华看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。

webpack-dev-server 安置及配置

用以下命令进行安置：

npm install webpack-dev-server --save-dev

--save-dev：将webpack-dev-server生存配置信息到pacjage.json的devDependencies(开发环境依赖)节点中。这样做是因为webpack-dev-server仅仅在本地开发时才会用到，在出产环境中并不需要它 。项目上线的时候，要进行依赖安置，，就可以通过npm install--production过滤失devDependencies中的冗余模块，从而加快安置和颁布的速度。

为了便捷地启动webpack-dev-server，我们在package.json中添加一个dev指令：

"scripts": { "build": "webpack", "dev": "webpack-dev-server --open" //open是自动执行后打开页面 }

最后，对webpack.config.js添加一个devServer东西，它是专门用来放webpack-dev-server配置的，webpack-dev-server可以看作一个处事者，它的主要事情就是接收浏览器的请求，然后将资源返回。当处事启动时，会先让Webpack进行模块打包并将资源筹备好（在示例中就是bundle.js）。当webpack-dev-server接收到浏览器的资源请求时，它会首先进行URL地点校验。如果该地点是资源处事地点（上面配置的publicPath），就会从Webpack的打包功效中寻找该资源并返回给浏览器。反之，如果请求地点不属于资源处事地点，则直接读取硬盘中的源文件并将其返回

"devServer": { "publicPath": './dist', "port": 3000 }

这里有一点需要注意。直接用Webpack开发和使用webpack-dev-server有一个很大的区别，前者每次城市生成budnle.js，而webpack-dev-server只是将打包功效放在内存中，并不会写入实际的bundle.js，在每次webpack-dev-server接收到请求时都只是将内存中的打包功效返回给浏览器。

webpack-dev-server还有一项很便捷的特性就是live-reloading（自动刷新）。当我们改削了内容之后，切换到浏览器你会发明，浏览器内容也变革了。

webpack-dev-server特点：

令Webpack进行模块打包，并措置惩罚惩罚打包功效的资源请求

作为普通的Web Server，措置惩罚惩罚静态资源文件请求

解决了来回npm run build,再更新代码的问题，对照便捷

可以设置port端口和open(自动打开页面)，其他更多配置可以参考官网api：https://webpack.js.org/configuration/dev-server/

自动刷新：浏览器自动变动后的内容

Webpack实战（二）：webpack-dev-server的介绍与用法