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