携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
webpack-dev-server 如何提高开发效率
最后，介绍 webpack-dev-server 进一步的提高我们的开发效率。
ebpack-dev-server 为我们提供了一个基本的 Web server，并且具有 live reloading（实时重新加载) 功能。当我们的页面修改编译以后，浏览器会监测到我们文件的修改来实现自动刷新。
要使用 Webpack 提供给我们 webpack-dev-server 这个工具，需要安装它。使用如下命令在本地安装。
npm install --save-dev webpack-dev-server
稍等片刻，webpack-dev-server 安装成功。
安装成功之后，需要在 webpack.config.js 文件配置 webpack-dev-server。
// webpack.config.js
//...
const path =require('path')
module.exports = {
//...
devServer:{
static: {
directory: path.join(__dirname, './dist'),
},
},
}
以上配置告知 webpack-dev-server ，将 dist 目录下的文件作为 web 服务的根目录。执行 npx webpack-dev-server。
通过 VS Code 控制台输出的信息，可以看到已经启动一个地址为 localhost，端口号 8080 服务。
打开浏览器，在地址栏访问：http://localhost:8080/。可以看到如下两个文件。
点击 index_app.html，可以看到浏览器控制台输出如下信息。
修改 hello.js 文件中 console 输出信息。
// hello.js
function hello(){
// console 书写错误
console.log("Hello Webpack ~~~~~")
}
export default hello
这时我们不用刷新浏览器页面，在控制台上能看到 Hello Webpack ~~~~~ 自动更新了。
这样我们 webpack-dev-server 就完成了自动的页面刷新的功能。
webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。
验证 webpack-dev-server 编译之将 bundle 文件存在内存中，删除 dist 目录，修改 hello.js 文件。
//hello.js
function hello(){
// console 书写错误
console.log("Hello Webpack ~~~~~ ==> 删除 dist 目录中所有文件")
}
export default hello
重新执行 webpack-dev-server 命令，可以看到在我们项目中不会生成 dist 目录。再去重新的进行浏览器的访问，可以看到页面并没有发生任何问题。
这样，不但我们的开发效率提高了，连 Webpack 编译效率也同时提高了。
