(20/24) webpack實戰技巧：watch實現熱打包和添加代碼備註

在前面的學習中，咱們一直使用webpack-dev-server充當（本地）服務器和完成打包任務，可是當出項目團隊聯合開發，共同使用一個服務器時，這時候咱們須要實時進行打包以確保團隊間能進行聯調或者進行相關代碼的合併工做時，每次保存後手動打包顯然效率過低，咱們須要的是代碼發生變化後，只要保存，webpack自動爲咱們進行打包。這就得談到本節中說到的watch工具了。

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

1.直接進行使用

1.1  修改咱們的package.json

在打包指令中添加--watch。

"scripts": {
    "server": "webpack-dev-server --open",
    "dev": "set type=dev&webpack --watch",
    "build": "set type=build&webpack --wathc",
  },

1.2 運行指令

好比運行npm run dev 進行開發打包。

npm run dev

 此時終端結尾以下：

1.3  修改src/index.html文件代碼

新增內容：

<div>watch</div>

1.4 保存（ctrl+S）

 保存後咱們會發現，終端底部信息爲：（修該過的文件信息）

 此時個人打包的文件中就會自動新增該部份內容。

 

到此咱們會以爲這個已經夠了，可以實現咱們的要求了，可是有時候直接用 –watch是不起做用的，這時候咱們須要在webpack.conffig.js文件中進行一些選項的配置。

配置信息以下：

2. 配置後使用

watchOptions:{
    //檢測修改的時間，以毫秒爲單位
    poll:1000, 
    //防止重複保存（ctrl+S）而發生重複編譯錯誤。這裏設置的500是半秒內重複保存，不進行打包操做
    aggregateTimeout:500, 
    //不監聽的目錄
    ignored:/node_modules/, 
}

poll:1000：以1000毫秒檢測一次，判斷是否修改過代碼。

aggregateTimeout:500：表示在500毫秒內屢次保存，只算一次。

ignored:/node_modules/,  表示不用檢測的node_modules文件

配置好後，咱們就能夠實現熱打包了，而不用反覆的手動打包了，從而加快開發效率。

3.添加代碼備註

 在工做中每一個人寫的代碼都要寫上備註，用於區分某部分代碼的編寫人。

這個插件就是BannerPlugin，會自動給咱們添加咱們指定的相關注釋。

3.1 引入

在webpack.config.js頭部引入文件：

const webpack = require('webpack');

3.2 配置

在webpack.config.js文件的plugins屬性中進行配置：

new webpack.BannerPlugin('wfaceboss編寫')

從新打包，這時在dist目錄下的entery.js已經加上了相關注釋。