HMR熱載入

• 如果需要開啟HMR熱載入功能，只需要在webpack.config.js中配置

/**
 * HMR: hot module replacement 熱模組替換 / 模組熱替換
 *      作用：一個模組發生變化，只會重新打包這一個模組（而不是打包所有模組）
 *          極大的提升構建速度
 *    樣式檔案：可以使用HMR功能：因為style-loader內部實現了~
 *    js檔案：預設不能使用HMR功能 --> 需要修改js程式碼，新增支援HMR功能的程式碼
 *    html檔案：預設不能使用HMR功能，同時會導致問題：html檔案不能熱更新了（不用做HMR功能） 
 *      解決：修改entry入口，將html檔案引入
 */
devServer: {
     contentBase: resolve(__dirname, 'build'),
     compress: true,
     port: 3000,
     open: true,
     // 開始HMR功能
     // 當修改了webpack配置，新配置要想生效，必須重啟weebpack服務
     hot: true
 }
 

• js檔案：預設不能使用HMR功能 --> 需要修改js程式碼，新增支援HMR功能的程式碼
  如：建立一個print.js,暴露一個介面print

console.log('print.js被載入了~~~');

function print(){
    const content = 'hello webpack';
    console.log(content);
}

export default print;

在index.js中引用，判斷module.hot熱載入模組是否開始，如果開始則重新呼叫

import '../css/index.less';
import print from './print';

console.log('index.js檔案被重新載入了');

print();

if(module.hot){
    // 一旦module.hot 為true，說明開啟了HMR功能，--> 讓HMR功能程式碼生效
    module.hot.accept('./print.js',function(){
        // 方法會監聽 print.js 檔案的變化，一旦發生變化，其他預設不會重新打包構建
        // 會執行後面的回撥函式
        print();
    })
}