Webpack部署本地服務器

目的

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

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

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

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 默認是false
    compress: true,
    port: 9000,
    // open 是否打開瀏覽器, 默認是 false 
    open: true,
    hot: true,
  },
};

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

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

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

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

什么是 HMR

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

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

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

如何使用 HMR

默認情況下，webpack-dev-server已經支持HMR，我們只需要開啟即可**（默認已經開啟）；**
在不開啟HMR的情況下，當我們修改了源代碼之后，整個頁面會自動刷新，使用的是live reloading；

host 配置

• host設置主機地址：

默認值是localhost；
如果希望其他地方也可以訪問，可以設置為 0.0.0.0；
port、open、compress
port設置監(jiān)聽的端口，默認情況下是8080

• open是否打開瀏覽器：

默認值是false，設置為true會打開瀏覽器；
也可以設置為類似于 Google Chrome等值；

• compress是否為靜態(tài)文件開啟gzip compression：

默認值是false，可以設置為true；

到此這篇關于Webpack部署本地服務器的文章就介紹到這了,更多相關Webpack部署服務器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論