// webpack.config.js文件
module.exports = {
entry: './src/index.js',
output: {
filename: './bundle.js',
},
mode: 'development',
devServer: {
publicPath: '/dist',
}
}
webpack-dev-server因为仅在本地开发时才会用到，它作为工程中的devDependencies（开发环境依赖），会记录在package.json文件中。
devServer是专门用来配置webpack-dev-server,它的主要工作是接收浏览器的请求，然后将资源返回；当服务启动时，会先让webpack进行模块打包并将资源准备好。
当webpack-dev-server接收到浏览器的资源请求时，他会首先进行URL地址校验。如果该地址是资源服务器地址（devServer中配置的publicPath），就会从webpack的打包结果中寻找该资源并返回给浏览器。反之，如果请求地址不属于资源服务地址，则直接读取硬盘中的源文件并将其返回。
webpack-dev-server的作用是启动一个本地服务，可以处理打包资源与静态文件的请求。它的live-reloading功能可以监听文件变化，自动刷新页面来提升开发效率。
总结： webpack-dev-server的两大职能：
-
令webpack进行模块打包并处理打包结果的资源请求；
-
作为普通的web server处理静态资源文件请求。
注意点： 直接使用webpack开发和使用webpack-dev-server有一个很大的区别：使用webpack开发时，每次都会生成一个bundle.js，而webpack-dev-server只是将打包结果放在内存中，并不会写入实际的bundle.js,在每次webpack-dev-server接收到起请求时都只是将内存中的打包结果返回给浏览器。
这一点可以通过删除工程中的dist目录来验证，你会发现即使dist目录不存在，刷新页面后功能仍正常。从开发的角度来看其实是合理的，因为在本地开发阶段我们经常会调整目录结构和文件名，如果每次都写入世纪文件最后就会产生一些没用的垃圾文件，还会干扰我们的版本控制，因此webpack-dev-server的处理方式显得更加简洁
