// 配置命令
// --open是服務(wù)啟動完成后，自動打開瀏覽器
"script": {
    "dev": "webpack-dev-server --open"
}

// 配置webpack.config.js
const webpakc = require('webpack');

moudle.exports = {
    // 熱更新的mode需要是開發(fā)模式
    mode: 'development',
    // 需要配置下面這個插件一起使用
    // 在derServer開啟了hot: true之后，其實不用手動引入
    // webpack會自動引入這個插件
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    }
}

WDS不會刷新瀏覽器。
WDS不輸出文件，只是放在內(nèi)存中，因此速度更快。

// 熱更新原理：
// 1.啟動階段：
（1）文件通過webpack-complier編譯后，將生成的文件傳遞給bundle-server，
    bundle-server開啟一個服務(wù)來支持文件通過類似localhsot:8080的方式在browser訪問
（2）HMR-Server在生成的文件中注入一個HMR-Runtime運行時，
    用來和brwoser建立連接通信，以便在文件更新時通知browser
// 2.文件更新階段
（1）文件通過webpack-complier編譯后，將更新的內(nèi)容傳遞給HMR-Server。
（2）HMR和HMR-Runtime通信，將更新的內(nèi)容通常以json的形式傳遞，
    HMR-Runtime局部更新bundle.js的文件內(nèi)容。

image.png

補充：
（1）webpack-complier：將文件生成bundles.js
（2）HMR—Server：將熱更新的文件傳遞給HMR-Runtime
（3）HMR-Runtime：被注入到bundle.js，用來更新文件的變化
（4）bundles.js是構(gòu)建后輸出的文件

額外先說明區(qū)分dev和prod的配置

（1）創(chuàng)建兩個配置文件

image.png

（2）package.json中區(qū)分dev和prod的命令

image.png

（3）兩個文件的配置要區(qū)分，

一些配置只能用在dev，例如WDS；一些配置只能用于prod，例如MiniCssExtractPlugin;注意區(qū)分mode類型：

mode: 'production', // prod
mode: 'development', // dev