webpack實現“熱更新”和“熱加載”(webpack3.6新增)

之前的博文有提到怎么樣去實現熱更新,但是居然要用到另外一個node框架（express）而且新增了一個入口（entry）兩個插件（plugin）來實現，大大提高了配置的復雜度，這樣其實對使用webpack的開發者來說是非常不友好的。

之后我在技術胖的博客發現，原來早在webpack3.6的時候已經推出了webpack-dev-server，而且使用非常簡單：

1.安裝

npm i webpack-dev-server -D

2.配置webpack.config.js(可以跳過不配值)

//省略一堆配置...
devServer:{
    host: 'localhost', //可選，ip
    port: 3000, //可選，端口
    contentBase:path.resolve(__dirname,'dist'), //可選，基本目錄結構
    compress: true //可選，壓縮
}

3.在package.json的script添加

webpack-dev-server不能直接在cmd使用，要通過npm run才能使用，因為npm run才會找到當前目錄的安裝的包，直接是找不到的（這也是為什么我們之前需要全局安裝gulp和webpack的原因，其實只是偷懶想在cmd直接跑webpack和gulp命令罷了）

"scripts":{
    "server": "webpack-dev-server"
}

4.跑起來（如果沒有配置，默認為localhost:8080）

npm run server

如果忽略掉可有可無的第二步，其實就是簡簡單單的安裝和使用而已，甚至還不需要配置服務器，比起之前的做法實在簡單太多了。

---

 

調試：需要有瀏覽器調試的話，在webpack.config.js加上

devtool:'eval-source-map'

就行了

---

關於hot-update.js

其實webpack有watch功能，當我們打包范圍內的文件被修改的時候，webpack是能夠檢測到的，並馬上進行重新打包，而為了快速完成打包，webpack會生成hot-update.js和hot-update.json文件來快速替換buddle.js的對應被修改的模塊。

而我們之前都在使用webpack-dev-server,這個其實只能滿足初期開發，到了后期開發我們是需要和后端合並在同一個服務器的（前端使用服務器返回靜態文件的功能，后端使用服務器接口返回動態數據的功能），而其他一般服務器並沒用像webpack-dev-server一樣使用“memory-fileSystem(內存文件系統)”，所以我們只能實時更新打包到真實的文件上，所以在對接后端的環節上，我們只能用webpack:watch的功能，這樣的熱更新顯然會比之前使用webpack-dev-server要慢上一些，但是webpack的watch使用hot-update.js這種替換更新的方式顯然使得熱更新也不會太慢。

---

 

當然想要在開發期間，前端用自己的服務器，不和后端共用一個服務器也是有辦法的，就是使用代理proxy

1.express有一個“http-proxy-middleware”的中間件，可以讓我們的express服務器充當代理

2.webpack-dev-server也可以配置代理：

devServer: {
    //省略其他設置。。。
    代理
    proxy: {
        '/api': {
            target: 'http://localhost:8081',
            pathRewrite: {'^/api': '/data'} //本來是反向代理去http://localhost:8081/api，rewrite之后就反向代理去http://localhost:8081/data
        }
    }
} 

 

代理可以使得服務器既可以訪問本地服務器的靜態文件，又可以作為中轉站替我們訪問后端接口。