細說webpack 7. webpack dev server 的使用

你們好！我是蘿蔔，今天跟你們分享官方提供開發工具 webpack dev server 的使用。

webpack-dev-server是一個基於 Express 的本地開發服務器。它使用 webpack-dev-middleware 中間件來爲經過 Webpack 打包生成的資源文件提供 Web 服務。它還有一個經過 Socket IO 鏈接着 webpack-dev-server 服務器的小型運行時程序。webpack-dev-server 發送關於編譯狀態的消息到客戶端，客戶端根據消息做出響應。

Tips：簡單來講 webpack-dev-server 就是一個 Express 的小型服務器，它是經過 Express 的中間件 webpack-dev-middleware 和 Webpack 進行交互的。因此咱們若是本身的項目自己就是個 Express 服務器，那麼可使用 webpack-dev-middleware 和 webpack-hot-middleware 兩個中間件來實現 HMR 功能。

命令行

webpack-dev-server 安裝以後，會提供一個 bin 命令行，經過命令行能夠啓動對應的服務。

// 項目中安裝 webpack-dev-server
npm i webpack-dev-server -D
// 使用 npx 啓動
npx webpack-dev-server複製代碼

執行 webpack-dev-server 命令以後，它會讀取 Webpack 的配置文件（默認是 webpack.config.js）而後將文件打包到內存中（因此看不到 dist 文件夾的生產，Webpack 會打包到硬盤上），這時候打開 server 的默認地址：localhost:8080 就能夠看到文件目錄或者頁面（默認是顯示 index.html，沒有則顯示目錄）。

跟 webpack-cli 同樣，webpack-dev-server 也有一些選項能夠添加：

// 修改端口號和 host
npx webpack-dev-server --port 3000 --host 127.0.0.1
// 啓動inline 模式的自動刷新
npx webpack-dev-server --hot --inline
// 手動指定 webpack config 文件
npx webpack-dev-server --config webpack-xxx.js
// 指定 webpack 的 mode
npx webpack-dev-server --mode development
// watch 功能，文件發生變化則觸發從新編譯
npx webpack-dev-server --watch
// dev-server默認會將工做目錄（當前目錄）最爲基本目錄，能夠手動修改它
npx webpack-dev-server --content-base ./build複製代碼

上面只介紹了經常使用的而且比較重要的一些命令行選項，要查看所有，可使用webpack-dev-server -h 查看幫助。

咱們還能夠將 webpack-dev-server 放到 package.json 的 scripts 裏面，例以下面例子，執行 npm run dev 實際就是執行的對應 webpack-dev-server 命令：

{
  ‘script’: {
    ‘dev’: ‘webpack-dev-server --mode development --config webpack.config.dev.js --hot --inline --port 3000’
  }
} 複製代碼

自動刷新

在開發中，咱們但願邊寫代碼，邊看到代碼的執行狀況，webpack-dev-server 提供自動刷新頁面的功能能夠知足咱們的需求。webpack-dev-server 支持兩種模式的自動刷新頁面。

• iframe 模式：頁面被放到一個 iframe 內，當發生變化時，會從新加載；
• inline 模式：將 webpack-dev-server 的重載代碼添加到產出的 bundle 中。

兩種模式都支持模塊熱替換（Hot Module Replacement）。模塊熱替換的好處是隻替換更新的部分，而不是整個頁面都從新加載。

使用方式：webpack-dev-server --hot --inline 是開啓 inline 模式的自動刷新。

和 Webpack 配置結合

webpack-dev-server 被 Webpack 做爲內置插件對外提供了，這樣能夠直接在對應的 Webpack 配置文件中經過 devServer 這個屬性的配置來配置本身的webpack-dev-server。

const path = require(path);
module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, ‘dist’),
    port: 3000
  }
}複製代碼

其中 devServer.port 表示服務器的監聽端口，即運行後咱們能夠經過 http://localhost:3000 來訪問應用；而 devServer.contentBase 表示服務器將從哪一個目錄去查找內容文件（即頁面文件，好比 HTML）。

配置完以後，在項目中執行 webpack-dev-server 咱們能夠用http://localhost:3000/這個地址來訪問本地開發服務了。

Tips： 1.啓動 devserver 是經過 webpack-dev-server 命令行來啓動的，不是 webpack 命令，執行 webpack 時 devServer 內容會被忽略。 2.在使用數組導出配置的方式時，只會使用第一個配置中的 devServer 選項，並將其用於數組中的其餘全部配置。

Hot Module Replacement

HMR 即模塊熱替換（Hot Module Replacement）的簡稱，它能夠在應用運行的時候，不須要刷新頁面，就能夠直接替換、增刪模塊。

Webpack 能夠經過配置 webpack.HotModuleReplacementPlugin 插件來開啓全局的 HMR 能力，開啓後 bundle 文件會變大一些，由於它加入了一個小型的 HMR 運行時（runtime），當你的應用在運行的時候，Webpack 監聽到文件變動並從新打包模塊時，HMR 會判斷這些模塊是否接受 update，若容許，則發信號通知應用進行熱替換。

要開啓 HMR 功能，須要三步：

1.設置 devServer.hot=true，devServer.inline=true（默認）；

• devServer.hot=true：會給 entry 添加 webpack/hot/dev-serve或者webpack/hot/only-dev-serve（devServer.hotOnly=true），這個是實現 HMR 的服務端代碼；
• devServer.inline=true：會給 entry 添加webpack-dev-server/client，這是通訊客戶端；

2.在 webpack.config.js 中添加 plugins：new webpack.HotModuleReplacementPlugin()；

3.修改入口文件添加 HMR 支持代碼：

// 在入口文件 index.js 最後添加以下代碼
if(module.hot){
// 通知 webpack 該模塊接受 hmr
module.hot.accept(err => {
    if(err) {
      console.log(err);
    }
  });
} 複製代碼

通過上面配置以後，再次執行 webpack-dev-server，打開http://localhost:3000，而後修改 index.js 內容，就能看到效果了。

Tips：使用 webpack-dev-server 的 CLI 功能只須要命令行中添加--hot，webpack-dev-server 會自動將webpack.HotModuleReplacementPlugin 這個插件添加到 Webpack 的配置中去，因此開啓 HotModuleReplacementPlugin 最簡單的方式就是使用 inline 模式（命令行添加 --inline）。

Webpack Dev Server 經常使用配置

• devServer.historyApiFallback：配置若是找不到頁面就默認顯示的頁面；
• devServer.compress：啓用 gzip 壓縮；
• devServer.hotOnly：構建失敗的時候是否不容許回退到使用刷新網頁；
• devServer.inline：模式切換，默認爲內聯模式，使用false切換到 iframe 模式；
• devServer.open：啓動後，是否自動使用瀏覽器打開首頁；
• devServer.openPage：啓動後，自動使用瀏覽器打開設置的頁面；
• devServer.overlay：是否容許使用全屏覆蓋的方式顯示編譯錯誤，默認不容許；
• devServer.port：監聽端口號，默認 8080；
• devServer.host：指定 host，使用0.0.0.0可讓局域網內可訪問；
• devServer.contentBase：告訴服務器從哪裏提供內容，只有在你想要提供靜態文件時才須要；
• devServer.publicPath：設置內存中的打包文件的虛擬路徑映射，區別於 output.publicPath；
• devServer.https：https 須要的證書籤名等配置。

小結

Webpack 的 webpack-dev-server 是 Webpack 生態鏈上很重要的一環，在咱們平常的開發環境，咱們可使用 webpack-dev-server 啓動本地服務器，並且可以實現 API 接口代理、靜態資源服務器、HMR，甚至還可以經過編寫 Express 中間件的方式來擴展功能。

可是 webpack-dev-server 自己也有它的侷限性，好比咱們項目自己就有一個 Node.js 的業務服務，那麼在使用 webpack-dev-server 來模擬接口數據就顯得畫蛇添足了。