在开发过程中有一个功能是很重要的，那就是错误调试，我们在编写代码过程中出现了错误，编译后的包如果提示不友好，将会严重影响我们的开发效率。而通过配置 source map 就可以帮助我们解决这个问题。
示例：
修改：src/index.js，增加一行错误的代码
由于mode: 'development' 开发模式是默认会打开 source map 功能的，我们先关闭它。
devtool: 'none' // 关闭 source map 配置执行打包来看下控制台的报错信息：
错误堆栈信息，竟然给的是打包之后的 bundle 文件中的信息，但其实我们在开发过程中的文件结构并不是这样的，因此我们需要它能指明我们是在 index.js 中的多少行发生错误了，这样我们就可以快速的定位到问题。
我们去掉 devtool:'none' 这行配置，再执行打包：
此时它就把我们在开发中的具体错误在堆栈中输出了，这就是 source map 的功能。
总结下：source map 它是一个映射关系，它知道 dist 目录下 bundle.js 文件对应的实际开发文件中的具体行列。
webpackDevServer每次修改完代码之后都要手动去执行编译命令，这显然是不科学的，我们希望是每次写完代码，webpack 会进行自动编译，webpackDevServer 就可以帮助我们。
增加配置：
devServer: { contentBase: './dist', // 服务器启动根目录设置为dist open: true, // 自动打开浏览器 port: 8081, // 配置服务启动端口，默认是8080 proxy:{ '/api': 'http://www.baidu.com' // 当开发环境时发送/api请求时都会代理到 host下 } },它相当于帮助我们开启了一个 web 服务，并监听了 src 下文件，当文件有变动时，自动帮助我们进行重新执行 webpack 编译。
我们在 package.json 中增加一条命令：
"scripts": { "start": "webpack-dev-server" },现在我们执行 npm start 命令后，可以看到控制台开始实行监听模式了，此时我们任意更改业务代码，都会触发 webpack 重新编译。
webpack-dev-server 实现请求代理在前后端分离的项目中进行前端开发时，想必每个同学都会碰到一个棘手的问题就是请求跨域。一般在生产环境下我们通过 nginx 进行代理，那么开发环境下我们一般如何处理呢，答案非常简单，配置webpack-dev-server 也可以轻易实现
devServer: { ... proxy:{ '/api': 'http://www.baidu.com' // 当开发环境时发送/api请求时都会代理到 host下 } }proxy 的配置项非常丰富具体可以参考文档，我们只需要记住，它可以提供代理服务器的功能给我们。
手动实现简单版 webpack-dev-server项目根目录下增加：server.js
加载包： npm install express webpack-dev-middleware -D
const express = require('express'); const app = express(); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const config = require('./webpack.config.js'); // 引入webpack配置文件 const compiler = webpack(config); // webpack 编译运行时 // 告诉 express 使用 webpack-dev-middleware， // 以及将 webpack.config.js 配置文件作为基础配置 app.use(webpackDevMiddleware(compiler, {})); // 监听端口 app.listen(3000,()=>{ console.log('程序已启动在3000端口'); });webpack-dev-middleware 作用：
通过 watch mode 监听资源的变更然后自动打包，本质上是调用 compiler 对象上的 watch 方法；
使用内存文件系统编译速度快 compiler.outputFileSystem = new MemoryFileSystem() ;
package.json 增加一条命令：
"scripts": { "server": "node server.js" },执行命令 npm run server 启动我们自定义的服务，浏览器中输入 :3000/ 查看效果。
热更新 Hot Moudule Replacement（HMR）模块热更新功能会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。
HMR 配置 const webpack = require('webpack'); module.exports = { devServer: { contentBase: './dist', open: true, port: 8081, hot: true // 热更新配置 }, plugins:[ new webpack.HotModuleReplacementPlugin() // 增加热更新插件 ] } 手动编写 HMR 代码