快捷導(dǎo)航

Webpack部署本地服務(wù)器的方法

更新時(shí)間：2024年03月27日 14:28:38 作者：愛(ài)敲代碼小黑

webpack-dev-server?是一個(gè)用于開(kāi)發(fā)環(huán)境的?Web?服務(wù)器,它集成了?Webpack,并提供了實(shí)時(shí)重新加載和熱替換等功能,以下是一個(gè)簡(jiǎn)單的?webpack-dev-server?配置和使用示例,感興趣的朋友跟隨小編一起看看吧

Webpack部署本地服務(wù)器

目的

完成自動(dòng)編譯
常用方式: webpack-dev-server

webpack-dev-server 是一個(gè)用于開(kāi)發(fā)環(huán)境的 Web 服務(wù)器，它集成了 Webpack，并提供了實(shí)時(shí)重新加載和熱替換等功能。以下是一個(gè)簡(jiǎn)單的 webpack-dev-server 配置和使用示例：

1.首先，確保已經(jīng)安裝了 webpack, webpack-cli 和 webpack-dev-server。如果沒(méi)有安裝，可以使用以下命令進(jìn)行安裝：

npm install --save-dev webpack webpack-cli webpack-dev-server -D   // 開(kāi)發(fā)環(huán)境

2.在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 webpack.config.js 的文件，用于存放 Webpack 配置信息：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    // 是否為靜態(tài)文件開(kāi)啟 gzip compression 默認(rèn)是false
    compress: true,
    port: 9000,
    // open 是否打開(kāi)瀏覽器, 默認(rèn)是 false 
    open: true,
    hot: true,
  },
};

這個(gè)配置文件定義了入口文件為 src/index.js，輸出文件為 dist/main.js，并配置了 webpack-dev-server 的相關(guān)參數(shù)。

3.在項(xiàng)目的 package.json 文件中添加一個(gè)啟動(dòng)腳本：

{
  "scripts": {
    "serve": "webpack serve"
  }
}

現(xiàn)在，可以通過(guò)運(yùn)行 npm run serve 命令來(lái)啟動(dòng) webpack-dev-server。服務(wù)器將在端口 9000 上啟動(dòng)，并在默認(rèn)瀏覽器中打開(kāi) http://localhost:9000。當(dāng)你對(duì) src/index.js 文件進(jìn)行更改時(shí)，服務(wù)器將自動(dòng)重新加載和熱替換。認(rèn)識(shí)模塊熱替換（HMR）

什么是 HMR

p HMR的全稱是Hot Module Replacement，翻譯為模塊熱替換；
p 模塊熱替換是指在應(yīng)用程序運(yùn)行過(guò)程中，替換、添加、刪除模塊，而無(wú)需重新刷新整個(gè)頁(yè)面；

HMR 通過(guò)如下幾種方式, 來(lái)提高開(kāi)發(fā)的速度

p 不重新加載整個(gè)頁(yè)面，這樣可以保留某些應(yīng)用程序的狀態(tài)不丟失；
p 只更新需要變化的內(nèi)容，節(jié)省開(kāi)發(fā)的時(shí)間；
p 修改了css、js源代碼，會(huì)立即在瀏覽器更新，相當(dāng)于直接在瀏覽器的devtools中直接修改樣式；

如何使用 HMR

默認(rèn)情況下，webpack-dev-server已經(jīng)支持HMR，我們只需要開(kāi)啟即可**（默認(rèn)已經(jīng)開(kāi)啟）；**
在不開(kāi)啟HMR的情況下，當(dāng)我們修改了源代碼之后，整個(gè)頁(yè)面會(huì)自動(dòng)刷新，使用的是live reloading；