快捷導(dǎo)航

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

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

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

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

目的

完成自動編譯
常用方式: webpack-dev-server

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

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

npm install --save-dev webpack webpack-cli webpack-dev-server -D   // 開發(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)文件開啟 gzip compression 默認(rèn)是false
    compress: true,
    port: 9000,
    // open 是否打開瀏覽器, 默認(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è)啟動腳本：

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

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

什么是 HMR

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

HMR 通過如下幾種方式, 來提高開發(fā)的速度

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