webpack學習筆記(三)--文件監聽

文件監聽

文件監聽是在發現文件發生變化時，自動從新構建出新的輸出文件

webpack開啓監聽模式，有兩種方式：

• 一、啓動命令：package.json中添加watch:'webpack --watch'

  ...
    "scripts": {
        "watch": "webpack --watch"
    },
    ...
  複製代碼

• 二、在webpack.config.js中設置

  module.exports = {
    entry:{...},
    output:{path:...,filename:...}
    watch:true,//默認false，不開啓
    watchOptions:{
        ignored:/node-modules/,//忽略，默認爲空
        aggregateTimeout:300,//默認300ms,監聽文件發生變化等待300ms,再去執行
        poll:1000//輪詢1s默認1000次
    }
  }
  複製代碼

  複製代碼

  原理：輪詢監聽文件的編輯時間，若是發生變化，將變化了的文件記錄下來存儲到磁盤中，等待aggregateTimeout時間以後，將記錄下來的文件一塊兒進行構建，構建到filename指定的文件中。

  複製代碼

文件熱更新 webpack-dev-server

輸出的文件存儲在內存中，因此會比watch快

配置以下：

• 一、安裝 npm i webpack-dev-server -D
• 二、package.json中配置開發環境下的文件熱更新,其中open是構建完成以後打開瀏覽器

{
    "scripts" : {
        "dev" : "webpack-dev-server --open"
    }
}
複製代碼

• 三、webpack.config.js中添加HotModuleReplacementPlugin插件,該插件是webpack的內置插件，因此須要引入webpack ;
• 四、webpack.config.js中添加devServer的配置

const webpack = require('webpack')
  module.exports = {
      plugins : [
          new webpack.HotModuleReplacementPlugin()
      ],
      devServer : {
          contentBase: './dist', //指定目錄
          hot : true //開啓熱更新
      }
  }
複製代碼

熱更新webpack-dev-middleware

示例源碼