webpack-dev-server 中 inline 和 HMR 的區別

webpack-dev-server

webpack-dev-server是一個小型的node.js Express服務器,它使用webpack-dev-middleware中間件來爲經過webpack打包生成的資源文件提供Web服務。它還有一個經過Socket.IO鏈接着webpack-dev-server服務器的小型運行時程序。webpack-dev-server發送關於編譯狀態的消息到客戶端，客戶端根據消息做出響應

簡單來講，webpack-dev-server就是一個小型的靜態文件服務器。使用它，能夠爲webpack打包生成的資源文件提供Web服務

inline和hot的功能上的區別

hot

webpac-dev-server支持Hot Module Replacement，即模塊熱替換，在前端代碼變更的時候無需整個刷新頁面，只把變化的部分替換掉。

inline

inline選項會爲入口頁面添加「熱加載」功能，即代碼改變後從新加載頁面。

// 1. 不會刷新瀏覽器
$ webpack-dev-server
//2. 刷新瀏覽器
$ webpack-dev-server --inline
//3. 從新加載改變的部分，不會刷新頁面
$ webpack-dev-server --hot
//4. 從新加載改變的部分，HRM失敗則刷新頁面
$ webpack-dev-server  --inline --hot複製代碼

⚠️經測試在webpack2中使用inline和hot都不須要在配置時(webpack.config.js中)添加參數爲true，即下面的代碼是多餘的

devServer: {
    contentBase: path.resolve(__dirname, './src'),
    port: 1024,
    hot: true,        // 不須要
    inline: true,     // 不須要
},複製代碼

inline和hot使用上的區別

inline

只需在命令行加入--line選項便可。例如：

webpack-dev-server --inline複製代碼

hot

1. 須要在命令行加入--hot選項：

   webpack-dev-server --hot複製代碼

2. 須要在入口處加上以下代碼

   if(module.hot){
    module.hot.accept()
   }複製代碼

能夠在控制檯看到以下輸出：

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.複製代碼

對chunkhash和hash的支持

webpack的hash字段是根據每次編譯compilation的內容計算所得，也能夠理解爲項目整體文件的hash值，而不是針對每一個具體文件的。

chunkhash是根據模塊內容計算出的hash值。

當使用--hot參數時，只能使用hash，若是使用chunkhash會報錯：

output: {
    path: path.resolve(__dirname, './output'),
    // filename: '[name].[chunkhash:8].bundle.js', // 會報錯
    filename: '[name].[hash:8].bundle.js',
},複製代碼

在使用--inline時，hash和chunkhash均可以使用。

示例代碼

示例代碼