webapck-dev-server热更新（简称WDS）

// 配置命令
// --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