问题： 开发过程中，修改代码后，想在页面看效果，该怎么做呢？
做法一：开发过程中，每次修改完代码后，重新执行打包命令。（弊端：每次改动代码都得，重新打包，太影响开发效率。）
做法二：在 package.json 中的 script 配置的短命令时，例如："npm run dev"; 在其命令后添加 --watch；监听文件变化
（弊端：浏览器不会自动刷新，需要手动去刷新 F5 ）
做法三：目前做法是 -- 使用 WDS （webpack-dev-server），进行热更新。
使用WDS的步骤如下：
1）安装命令： npm install webpack-dev-server -save-dev || npm i webpack-dev-server -D
2）在 webpack.config.js 中配置
在webpack.config.js中的配置如下（不属于五个基本配置项）：
开发服务器 devServer: 用来自动化（自动编辑、自动打开浏览器、自动刷新浏览器~~）
特点：只会在内存中编译打包，不会有任何输出。
启动devServer指令：npx webpack-dev-server
devServer: {
contentBase: './dist', // 指定了服务器资源的根目录( 启动打包后的访问的位置, contentBase 代表我要运行的目录， resolve(dirname, 'build') 是构建后的目录。 )
open: true, // 打开浏览器
port : '3000'. // 更改启动后的端口，
host：'localhost', // 设置的是服务器的主机号
autoOpenBrowser: true, // 默认打开浏览器
progress: true, // 可以在编辑器的控制台展示一下进度（进度）
compress: true, // 启动gzip压缩
hot: true, // 启动热更新
}
webpack-dev-server 好处：
1、输出的文件只存在于内存中,不输出真实的文件 ( 只是生成了一个内存(RAM)中的打包 )
你要提供哪里的内容给虚拟服务器用。这里最好填 绝对路径。
// 单目录contentBase: path.join(__dirname, "public")
// 多目录contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]默认情况下，它将使用您当前的工作目录来提供内容。
就这样子，欢迎指正~
