快捷導(dǎo)航

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

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

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

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

目的

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

webpack-dev-server 是一個用于開發(fā)環(huán)境的 Web 服務(wù)器，它集成了 Webpack，并提供了實時重新加載和熱替換等功能。以下是一個簡單的 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.在項目根目錄下創(chuàng)建一個名為 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,
  },
};

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

3.在項目的 package.json 文件中添加一個啟動腳本：

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

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