Webpack 開發工具與模塊熱替換

?? 注意：

永遠不要在生產環境中使用這些工具，永遠不要。

devtool

當 JavaScript 異常拋出時，你常會想知道這個錯誤發生在哪個文件的哪一行。然而因為 webpack 將文件輸出為一個或多個 bundle，所以 追蹤這一錯誤會很不方便。

Source maps試圖解決這一問題。它有很多選擇，各有優劣：

+表示較快，-表示較慢，o表示時間相同

對於開發環境，通常希望更快速的 Source Map，需要添加到 bundle 中以增加體積為代價，但是對於生產環境，則希望更精準的 Source Map，需要從 bundle 中分離並獨立存在。

個人建議：開發環境使用 cheap-module-eval-source-map；開發環境使用cheap-module-source-map。

使用方式非常簡單，在 webpack.config.js中配置如下：

module.exports = {
// 通過在瀏覽器調試工具(browser devtools)中添加元信息(meta info)增強調試
// devtool: "eval", // 沒有模塊映射，而是命名模塊。以犧牲細節達到最快。
// devtool: "source-map", // 犧牲了構建速度的 `source-map" 是最詳細的
// devtool: "inline-source-map", // 嵌入到源文件中
// devtool: "eval-source-map", // 將 SourceMap 嵌入到每個模塊中
// devtool: "hidden-source-map", // SourceMap 不在源文件中引用
// devtool: "cheap-source-map", // 沒有模塊映射(module mappings)的 SourceMap 低級變體(cheap-variant)
// devtool: "cheap-module-source-map", // 有模塊映射(module mappings)的 SourceMap 低級變體
devtool: "cheap-module-eval-source-map",
};

webpack-dev-server

webpack-dev-server可以提供了一個伺服器和實時重載（live reloading） 功能。

在開始前，確定你有一個 index.html文件指向你的 bundle。假設output.filename是bunlde.js。

首先從 npm 安裝 webpack-dev-server：

$ npm install --save-dev webpack-dev-server

安裝完成之後，你應該可以使用 webpack-dev-server了，方式如下：

$ webpack-dev-server --open

上述命令應該自動在瀏覽器中打開 http://localhost:8080。

?? 提示：

本教程中的 示例代碼除了demo00，都可以使用 webpack-dev-server 命令啟動服務。

在你的文件中做一點更改並且保存。你應該可以在控制台中看到正在編譯。編譯完成之後，頁面應該會刷新。如果控制台中什麼都沒發生，你可能需要調整下 watchOptions。

默認情況下 webpack 會使用inline mode（內聯模式）。這種模式在你的 bundle 中注入客戶端（用來 live reloading 和展示構建錯誤）。Inline 模式下，你會在你的 DevTools 控制台中看到構建錯誤。

webpack-dev-server可以做很多事情，比如轉發請求到你的後端伺服器。

webpack-dev-server支持很多 cli 參數，來手動配置服務的選項。

但是，個人建議，一種更好的做法是在 webpack.config.js文件中通過配置devServer屬性來配置 webpack-dev-server 。

?? 示例DEMO12：(DEMO/SOURCE)

在本示例中，devServer 配置如下：

devServer: { contentBase: [path.join(__dirname, "dist")], compress: true, port: 9000, // 啟動埠號 inline: true, }

執行 webpack-dev-server 後，會啟動一個埠為 9000 的本地服務。

熱模塊替換（Hot Module Replacement）

?? 提示：

模塊熱替換功能一般用於開發環境。

現在你有了實時重載功能，你甚至可以更進一步：Hot Module Replacement（熱模塊替換）。這是一個介面，使得你可以替換模塊而不需要刷新頁面。不用每次修改都重新啟動服務，這可以極大地提高開發效率。

那麼，如何配置 webpack 來實現熱替換呢？

請按以下步驟一步步來：

首先，安裝依賴 react-hot-loader（確保使用這個包的next版本）

$ npm install --save babel-loader react-hot-loader@next

配置 entry

你需要定義幾個用於熱替換的入口路徑

entry: {
main: [
// App 入口
"./app/index",

// 為熱替換(HMR)打包好代碼
// only- 意味著只有成功更新運行代碼才會執行熱替換(HMR)
"webpack/hot/only-dev-server",
],
},

配置 output

publicPath對於熱替換(HMR)是必須的，讓 webpack 知道在哪裡載入熱更新的模塊(chunk)

output: {
... ...
// 對於熱替換(HMR)是必須的，讓 webpack 知道在哪裡載入熱更新的模塊(chunk)
publicPath: "/"
},

配置 module

需要使用 ES2015 模塊來使 HMR 正常工作。為此，在我們的 es2015 preset 設置中，將 module選項設置為 false。

並且，在此要引入 react-hot-loader/babel開啟 React 代碼的模塊熱替換(HMR)

module: {

"react" // 轉譯 React 組件為 JavaScript 代碼
],
plugins: [
"react-hot-loader/babel" // 開啟 React 代碼的模塊熱替換(HMR)
]
},
},
]
},

配置 devServer

此處，也需要引入 publicPath，且和上文output的publicPath值保持一致。

hot屬性需要置為 true，表示開啟伺服器的模塊熱替換。

devServer: {
contentBase: [path.join(__dirname, "dist")],
compress: true,
port: 9000, // 啟動埠號
hot: true, // 啟用 webpack 的模塊熱替換特性
inline: true,
publicPath: "/", // 和上文 output 的「publicPath」值保持一致
}

配置 plugins

最後，需要開啟 webpack 自帶的 HotModuleReplacementPlugin和NamedModulesPlugin插件，啟動熱替換功能。

plugins: [
// 開啟全局的模塊熱替換(HMR)
new webpack.HotModuleReplacementPlugin,

// 當模塊熱替換(HMR)時在瀏覽器控制台輸出對用戶更友好的模塊名字信息
new webpack.NamedModulesPlugin,
],

?? 示例DEMO13：(SOURCE)

在示例中，啟動服務後，打開瀏覽器，訪問 http://localhost:9000/。

按快捷鍵 F12打開瀏覽器調試窗口，可以看到類似提示信息

[HMR] Waiting for update signal from WDS... [HMR] Waiting for update signal from WDS... [WDS] Hot Module Replacement enabled.

這表示熱替換功能已啟動。

修改 app/index.jsx文件，來看看熱替換的效果：

修改前：

ReactDOM.render( , document.getElementById("root") );

修改後：

ReactDOM.render( , document.getElementById("root") );

此時，應該看到頁面內容會替換為你修改的內容。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！