Webpack 開發工具與模塊熱替換
⚠️ 注意：
永遠不要在生產環境中使用這些工具，永遠不要。
devtool
當 JavaScript 異常拋出時，你常會想知道這個錯誤發生在哪個文件的哪一行。然而因為 webpack 將文件輸出為一個或多個 bundle，所以 追蹤這一錯誤會很不方便。
Source maps 試圖解決這一問題。它有很多選擇，各有優劣：
| devtool | build | rebuild | production | quality |
|---|---|---|---|---|
| eval | +++ | +++ | no | generated code |
| cheap-eval-source-map | + | ++ | no | transformed code (lines only) |
| cheap-source-map | + | o | yes | transformed code (lines only) |
| cheap-module-eval-source-map | o | ++ | no | original source (lines only) |
| cheap-module-source-map | o | - | yes | original source (lines only) |
| eval-source-map | -- | + | no | original source |
| source-map | -- | -- | yes | original source |
| nosources-source-map | -- | -- | yes | without source content |
+表示較快，-表示較慢，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。
<html>
<body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
首先從 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 。
更多配置項參考：官方文檔 - 開發中 Server(DevServer)
在本示例中，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",
// 開啟 React 代碼的模塊熱替換(HMR)
'react-hot-loader/patch',
// 為 webpack-dev-server 的環境打包代碼
// 然后連接到指定服務器域名與端口
'webpack-dev-server/client?http://localhost:9000',
// 為熱替換(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: {
rules: [
{
// 語義解釋器，將 js/jsx 文件中的 es2015/react 語法自動轉為瀏覽器可識別的 Javascript 語法
test: /\.jsx?$/,
include: path.resolve(__dirname, "app"),
exclude: /node_modules/,
// 應該應用的 loader，它相對上下文解析
// 為了更清晰，`-loader` 后綴在 webpack 2 中不再是可選的
// 查看 webpack 1 升級指南。
loader: "babel-loader",
// loader 的可選項
options: {
presets: [
// webpack 現在已經支持原生的 import 語句了, 並且將其運用在 tree-shaking 特性上
[
"es2015",
{
"modules": false
}
],
"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( <Welcome name="Victor Zhang"/>, document.getElementById("root") );修改后：
ReactDOM.render( <Welcome name="guest"/>, document.getElementById("root") );此時，應該看到頁面內容會替換為你修改的內容。
Webpack 系列教程
歡迎閱讀其它內容：