// 配置命令
// --open是服务启动完成后，自动打开浏览器
"script": {
"dev": "webpack-dev-server --open"
}
// 配置webpack.config.js
const webpakc = require('webpack');
moudle.exports = {
// 热更新的mode需要是开发模式
mode: 'development',
// 需要配置下面这个插件一起使用
// 在derServer开启了hot: true之后，其实不用手动引入
// webpack会自动引入这个插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
}
WDS不会刷新浏览器。
WDS不输出文件，只是放在内存中，因此速度更快。
// 热更新原理：
// 1.启动阶段：
（1）文件通过webpack-complier编译后，将生成的文件传递给bundle-server，
bundle-server开启一个服务来支持文件通过类似localhsot:8080的方式在browser访问
（2）HMR-Server在生成的文件中注入一个HMR-Runtime运行时，
用来和brwoser建立连接通信，以便在文件更新时通知browser
// 2.文件更新阶段
（1）文件通过webpack-complier编译后，将更新的内容传递给HMR-Server。
（2）HMR和HMR-Runtime通信，将更新的内容通常以json的形式传递，
HMR-Runtime局部更新bundle.js的文件内容。
image.png
补充：
（1）webpack-complier：将文件生成bundles.js
（2）HMR—Server：将热更新的文件传递给HMR-Runtime
（3）HMR-Runtime：被注入到bundle.js，用来更新文件的变化
（4）bundles.js是构建后输出的文件
额外先说明区分dev和prod的配置
（1）创建两个配置文件
image.png
（2）package.json中区分dev和prod的命令
image.png
（3）两个文件的配置要区分，
一些配置只能用在dev，例如WDS；一些配置只能用于prod，例如MiniCssExtractPlugin;注意区分mode类型：
mode: 'production', // prod
mode: 'development', // dev
