?

webpack-dev-server插件

webpack-dev-server是webpack官方提供的一個小型Express服務器。使用它可以為webpack打包生成的資源文件提供web服務。

webpack-dev-server 主要提供兩個功能：

• 為靜態文件提供服務
• 自動刷新和熱替換(HMR)

HotModuleReplacementPlugin插件

HotModuleReplacementPlugin主要用于代碼熱替換(具體用途還不清楚，因為沒有研究通透吧)

?

一、webpack-dev-server插件說明

安裝：

在cmd中輸入npm?webpack-dev-server -g執行；

啟動：

在cmd中輸入 webpack-dev-server執行；

?

額外參數配置

在webpack.config.json中增加devServer配置項

配置參數說明如下：

• --content-base <file/directory/url/port>: base path for the content.
• --quiet: don’t output anything to the console.
• --no-info: suppress boring information.
• --colors: add some colors to the output.
• --no-colors: don’t use colors in the output.
• --compress: use gzip compression.
• --host <hostname/ip>: hostname or IP.?0.0.0.0?binds to all hosts.
• --port <number>: port.
• --inline: embed the?webpack-dev-server?runtime into the?bundle.
• --hot: adds the?HotModuleReplacementPlugin?and switch the server to?hot mode. Note: make sure you don’t add?HotModuleReplacementPlugin?twice.
• --hot --inline?also adds the?webpack/hot/dev-server?entry.
• --public: overrides the host and port used in?--inline?mode for the client (useful for a VM or Docker).
• --lazy: no watching, compiles on request (cannot be combined with?--hot).
• --https: serves?webpack-dev-server?over HTTPS Protocol. Includes a self-signed certificate that is used when serving the requests.
• --cert,?--cacert,?--key: Paths the certificate files.
• --open: opens the url in default browser (for webpack-dev-server versions > 2.0).
• --history-api-fallback: enables support for history API fallback.
• --client-log-level: controls the console log messages shown in the browser. Use?error,?warning,?info?or?none.

webpack-dev-server相關介紹請參見這里

?

HotModuleReplacementPlugin?

?（后續補充吧）

轉載于:https://www.cnblogs.com/sunflowerGIS/p/6821792.html

總結

以上是生活随笔為你收集整理的webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。