總的來說，需求就兩點，一是需要乙個http伺服器，來供手機訪問靜態資源，另乙個是監聽**的改動並自動重新整理瀏覽器。要滿足這兩個需求的第三方工具，應當不難找，事實上像fis,yeoman,vuecli這樣的工具應當都可以做到。可是我覺得它們都太複雜了，雖然我只用到其中一點點功能，但是我不得不仔細的通讀他們的文件，找到自己需要的功能。有時候，官方說三分鐘入門，可是我花三十分鐘了還沒有入門。或許我幾天之後，我好不容易入門了，結果周圍同事又給我推薦另乙個工具，說比我手上這好一千倍，於是我又去學另乙個工具。如此，很容易陷入不同工具之間的學習。更要命的是，轉了一圈回來，其實我用的那一點功能，用哪乙個工具都差不多，既不像a同學說的那麼差勁，也不像b同學說的那麼好。
2023年6月份的時候，我們的專案開始用express+react.js做服務端渲染，redux做狀態管理。我們搭建了一套開發框架，以前那些自動化的工具，都不能完全滿足我的需求了。js和css的改動越來越頻繁，而且node不像php**那樣，改動之後，伺服器會自動更新，它需要手動重啟node程序，另一方面，自動重新整理瀏覽器，會導致redux的action日誌看不到。這個時候，瀏覽器的自動重新整理已經滿足不了我們的需求。我們需要瀏覽器在不重新整理的情況下，區域性更新我改過的**。這也就是「熱替換」(hmr)這個概念的來由。很多新同事搞不清什麼是自動重新整理，什麼是熱替換。熱替換聽起來，有點像是ajax的效果，不過，ajax是點選某個動作或觸發某個事件之後由js指令碼觸發，而「熱替換"是在我們改動了**的時候觸發（也就是ctrl+s儲存的時候）. 自動重新整理就是指不用手動去按f5.
要實現自動重新整理和靜態伺服器，最簡的就是用webpack-dev-server . 如果之前用過webpack，那麼webpack-dev-server則很容易接受，如果還沒有用過webpack,那麼我覺得很有必要去看看。網上有很多介紹webpack及webpack-dev-server的文章，我覺得要這實現這個需求，只要兩步就可以：
1.安裝webpack-dev-server
2. 執行webpack-dev-server --inline --hot
webpack.config.js的配置：
var path = require("path");
var webpack = require('webpack');
//var extracttextplugin = require("extract-text-webpack-plugin");
var node_modules_dir = path.resolve(__dirname, 'node_modules');
module.exports = ,]},
output: ,
resolve: ,
plugins: [
new webpack.defineplugin(),
//new webpack.hotmodulereplacementplugin(),
new webpack.noerrorsplugin()]}
通過命令列的方式執行webpack-dev-server ， 重點要說的是--hot這個引數，它就是啟動熱替換用的。它會自動給plugins插入new webpack.hotmodulereplacementplugin() 因此不需要人為的再配置這個外掛程式了。所以我在webpack.config.js中注釋掉了這一行。 然後entry中也不需要加webpack/hot/dev-server和webpack-dev-server/client，記住：命令列方式執行webpack-dev-server會自動替你完成這些工作。不要人云亦云的去新增這些注釋的內容，我看到甚至還有用express配合webpack-hot-middleware，webpack-dev-middleware 之類的用法，那更加複雜了，對於只想要實現自動重新整理和熱替換來說，命令列方式執行，配合 --hot --inline 這兩個引數是最簡單有效的做法。其它複雜的配置和用法，有它的特殊的適用場景，比如同時需要兩個伺服器，乙個充當資料介面，乙個充當靜態檔案伺服器， 我們希望webpack-dev-server通過node api的方式執行。這個有點複雜，用到這麼複雜的情形的，一般都是能自己搞定這個配置的。有這方面需求的，參考demo8的**。
extract-text-webpack-plugin這個外掛程式，它可以將模組中的樣式部分提出來，單獨打包成檔案，但是它只適用於生產模式。開始我也沒有注意，在開發模式下也用了，還覺得很爽，直到有一次，我發現更改樣式的時候，瀏覽器居然自動重新整理了,而我期望是熱替換。這時我才理解，只適用於生產模式，不是說它在開發模式下，就不生效了，而是它配合 --hot引數的時候，不會有熱替換的效果。
簡單的一行小字，沒有細看，結果走了很多彎路。俗話說，方向反了，停止就是進步。 對於普通的js模組來說，熱替換需要自己寫loader外掛程式，如果是react,vue則官方會提供熱替換的loader,比如react的 react-hot-loader 。如果沒有用這些可以支援熱替換的外掛程式，那麼預設的就是瀏覽器的自動重新整理效果。css的話，只要加上css-loader,style-loader就可以了。最後再補一刀，output:中要配publicpath
/assets/這個虛擬目錄中的檔案實際上是儲存在記憶體中的，這樣就為模組的熱替換提供了可能。如果寫成實際的產出目錄，是怎麼也不會看到熱替換的效果的，
甚至連自動重新整理都不會出現.
出現這個hmr說明配置方面是對的，但是光有這個還不行，如果模組沒有熱替換的loader，那麼就會觸發失敗，失敗的結果就是導致瀏覽器重新整理。這也是為什麼有時候明明出現這個熱替換的標誌了，還是會出現瀏覽器重新整理。如果新增了支援熱替換的loader，那麼當我們儲存更改的時候，瀏覽器只會默默的更新變化區域，而不會產生重新整理。同時，控制台的log也會累積，不會被清空。
辛苦做出來的h5頁面，在電腦上模擬顯示的效果，都未必可靠，最後都需要放到手機上進行真機檢測。通過webpack-dev-server生成的http伺服器，可以實現通過手機訪問。比如電腦的ip是192.168.1.122, 預設情況下，那麼通過就可以在手機上開啟我們的h5頁面。如果打不開，請檢查兩個地方：
1. webpack-dev-server 新增 --host 0.0.0.0 引數
2. 保證電腦和手機處於同乙個無線網路，即電腦可以ping通手機。
在手機上檢測完好之後，就需要把**進行合併，壓縮，新增hash標記，小,字型檔案轉base64，提取共公**等等. 一方面可以簡單的使用
webpack -p 也可自行配置webpack.config.js，演示：
plugins: [到此，整個構建工作就完成了。new webpack.defineplugin(),
new extracttextplugin('css/[name].css'),
new webpack.optimize.uglifyjsplugin(,
output: ,
sourcemap: false
}),new webpack.optimize.commonschunkplugin('vendor','js/vendor.js'),
new webpack.optimize.occurenceorderplugin(true),
new webpack.noerrorsplugin()
]
關於webpack及webpack-der-server的教程很多，但是很多文章發布的較早，不一定適用你現在用的版本。遇到問題的時候，我建議先看看錯誤提示，然後檢視官方文件。先從簡單的用法開始去動手嘗試，一定要嘗試，不要覺得很簡單，只在腦海裡想當然的執行一遍就以為學會了，俗話說，實踐出真知，同樣的問題，不同的環境(windows/mac/node版本...)，會有不同的情況，只有自己一一去試過了，遇到問題心中有數，才不會慌。最後，要把學到的內容結合實際的專案去運用看看，有哪些功能對目前的開發有幫助，哪些功能還不是很了解，需要更深入的學習。遇到實在有自己找不到解決辦法的問題，再去網上查,個人覺得stockoverflow還算比較靠譜。最後，要記得把自己遇到的坑整理成章，分享是一種美德。
Maven工程自動化構建方法
1 所需構建工程filters下新增以下配置檔案 開發環境 dev.properties 生產環境 prd.properties 環境 simu.properties 測試環境 test.properties properties檔案為配置資料庫基本資訊，如下 根據實際情況修改資訊 下同 jdbc....
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...
Gulp 自動化構建
use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以...