隨着項目大了,后端與前端聯調,我們不需要每一次都去打包,這樣特別麻煩,我們希望的場景是,每次按保存鍵,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配置文件使用
如果我的內容對你有幫助,歡迎打賞