webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

隨着項目大了，後端與前端聯調，咱們不須要每一次都去打包，這樣特別麻煩，咱們但願的場景是，每次按保存鍵，webpack自動爲咱們打包，這個工具就是watch！

由於watch是webpack自帶的插件，因此咱們只須要配置就好了

1.在webpack.config.js中配置：

watchOptions:{
    poll:1000,//監測修改的時間(ms)
    aggregeateTimeout:500, //防止重複按鍵，500毫米內算按鍵一次
    ignored:/node_modules/,//不監測
}

2.在終端中輸入：webpack --watch 進行打包

3.咱們看到已經打包成功了，這時候小夥伴們能夠本身測試，改一個html文件，再按保存鍵，看看終端下面有什麼反應。

 

小彩蛋~~

不少時候項目經理會讓咱們把註釋加上，是誰誰寫的，這時候咱們就須要一個

BannerPlugin插件：

 

new webpack.BannerPlugin('hezihao版權全部！')

 

，好 現學現用，在終端輸入 webpack  --watch，進行打包；效果以下：

在dist目錄下的entry.js中已經有了這行註釋

 

 

 

前端必學內容：webpack（模塊打包器）

 

webpack3 學習內容，點擊便可到達

 

(1).webpack快速入門——如何安裝webpack及注意事項

 

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

 

(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置 

 

(4).webpack快速入門——配置文件：服務和熱更新

 

(5).webpack快速入門——CSS文件打包

 

(6).webpack快速入門——配置JS壓縮，打包

 

(7).webpack快速入門——插件配置：HTML文件的發佈

 

(8).webpack快速入門——CSS中的圖片處理

 

(9).webpack快速入門——CSS分離與圖片路徑處理

 

(10).webpack快速入門——處理HTML中的圖片

 

(11).webpack快速入門——CSS進階，Less文件的打包和分離

 

(12).webpack快速入門——CSS進階：SASS文件的打包和分離

 

(13).webpack快速入門——CSS進階：自動處理CSS3前綴

 

(14).webpack快速入門——CSS進階：消除未使用的CSS

 

(15).webpack快速入門——給webpack增長babel支持

 

(16).webpack快速入門——打包後如何調試

 

(17).webpack快速入門——實戰技巧：開發和生產並行設置

 

(18).webpack快速入門——實戰技巧：webpack模塊化配置

 

(19).webpack快速入門——實戰技巧：優雅打包第三方類庫

 

(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

 

(21).webpack快速入門——實戰技巧：webpack優化黑技能

 

(22).webpack快速入門——集中拷貝靜態資源

 

(23).webpack快速入門——Json配置文件使用

 

若是個人內容對你有幫助，歡迎打賞