js-工具嘗試篇-webpack-dev-server

waltr 發(fā)布于2019-08-20 14:12 / 654人閱讀

摘要：以前看或者做開發(fā)的時(shí)候，常常看到。看介紹是一個(gè)基于框架的小服務(wù)，通過來處理這個(gè)打包機(jī)小查了一下，的作用是把打包成中間件。原理大致清楚了，還可以根據(jù)需求選不同的模式事不宜遲，趕緊試試吧。那么是如何引進(jìn)來的呢所以說，是生成在內(nèi)存中的。

以前看demo或者做開發(fā)的時(shí)候，常常看到webpack-dev-server。
這邊敲代碼，同時(shí)刷新瀏覽器，真是nice!
但是自己卻沒有了解學(xué)習(xí)過它是怎一回事，直接就著用。導(dǎo)致現(xiàn)在覺得不把這個(gè)東西吃一吃，渾身不自在！

原理是什么
這么神奇的東西的原理是什么，作為小白開發(fā)者當(dāng)然很好奇。
看介紹http://webpack.github.io/docs...

webpack-dev-server是一個(gè)基于express框架的nodejs小服務(wù)，通過webpack-dev-middleware來處理webpack這個(gè)打包機(jī)（小walker查了一下，webpack-dev-middleware的作用是把webpack打包成中間件）。它也有一個(gè)連接這個(gè)服務(wù)的小運(yùn)行環(huán)境，經(jīng)由sock.js實(shí)現(xiàn)（sock.js小walker查了一下，是一個(gè)js庫(kù)，可用作創(chuàng)建跨瀏覽器的，瀏覽器和服務(wù)器間的通信信道）。

原理大致清楚了，還可以根據(jù)需求選不同的模式？事不宜遲，趕緊試試吧。

嘗試代碼的github地址https://github.com/WalkerZyy/...
Try No.1 hello world
文件目錄：

package.json:

配置webpack.config.js：

參考著官網(wǎng)寫了個(gè)服務(wù)：
由于unshift進(jìn)dev的那串代碼意義不明，所以先注釋了，后面再研究

dev中的main.js：

helloworld.html:

package.json中加命令

瀏覽器中看結(jié)果：

好了，成功了，但是還是有些小疑惑，下面一點(diǎn)點(diǎn)來扣

首先，參數(shù)解讀之contentBase

The webpack-dev-server will serve the files in the current directory, unless you configure a specific content base.

也就是說，服務(wù)會(huì)默認(rèn)一個(gè)網(wǎng)站目錄，如果我不填這個(gè)參數(shù)，相當(dāng)于
contentBase:"./"
瀏覽器訪問結(jié)果：

現(xiàn)象觀察，生成的index.js在哪里
我的helloworld.html里引入了編譯后的index.js，但是bin目錄里并沒有，任何目錄里都沒有。那么是如何引進(jìn)來的呢？

所以說，是生成在內(nèi)存中的。
描述中，有個(gè)publicPath，這時(shí)候我如果添加publicPath，也就是“/assets/”

取不到了
改為：

就ok了

另外如英語(yǔ)描述，打包是實(shí)時(shí)的，我加個(gè)新感嘆號(hào)

就看到又打包了，刷新網(wǎng)頁(yè)：

自動(dòng)刷新
剛才沒有自動(dòng)刷新的，因?yàn)闆]有配
自動(dòng)刷新有兩種模式Inline 和iframe
最終效果都一樣
參考http://blog.csdn.net/chengnuo...
這兩種模式，官網(wǎng)都有講
webpack-dev-server的啟動(dòng)模式有兩種
node Api模式和cmd模式
之前注釋掉的下面這段代碼就是配置nodejs Api形式的inline模式

Hot Module Replacement
熱替換是什么
參考https://segmentfault.com/a/11...
命令行方式的做法先略去，直接看node.js Api的做法
按照官網(wǎng)的做法

public地址不對(duì)會(huì)有跨域報(bào)錯(cuò)
熱替換原來也是要刷新頁(yè)面的嗎？
https://segmentfault.com/a/11...
https://segmentfault.com/q/10...
所以說，熱替換是給可以熱替換的模塊用的

好了，不糾結(jié)了，先寫這么多