webpack-dev-server的安裝使用教程

Posted on by

作用

  • 相當於在本地開啟瞭一個服務，我們可以通過http網絡請求訪問
  • 提高瞭IO性能，因為webpack-dev-server將我們的文件編譯後放到內存裡面，以空間換時間
  • 無需我們每次都需要手動編譯我們的文件，我們每次保存文件，就會自動的幫助我們編譯發佈（註意：webpack4以上，也可以通過開啟watch屬性實現這個功能）

安裝

運行環境

  • “webpack”: “^5.33.2”,
  • “webpack-cli”: “^4.6.0”

1.前提：

webpack-dev-server依賴webpack，我們需要先安裝webpack

2.如果是webpack4以上我們還需要安裝webpack-cli

npm install webpack --save-dev
npm install  webpack-cli --save-dev

2.安裝webpack-dev-server

npm install webpack-dev-server ---save-dev

3.編寫webpack.config.js

因為webpack-dev-server完全依賴於webpack，所以我們需要編寫webpack的配置文件
例如：

// path 模塊解決項目路徑問題
const path = require('path')
module.exports = {
    //打包模式，一定要配置，不然打包速度慢很多
    mode: 'development', //開發模式
    // mode:'production',//生產模式

    //入口  
    entry: path.join(__dirname, './src/main.js'), // __dirname 是node的通用變量，代表當前項目路徑
    output: {
        // 配置打包後文件存放目錄
        path: path.join(__dirname, './dist'),
        // 配置打包後文件的名稱
        filename: 'bundle.js'
    },
    // 監聽文件改動，自動打包
    //  watch: true,
    devServer: {
        contentBase: path.join(__dirname, './'), // 指定發佈後的映射的路徑，./代表映射當前路勁
        compress: true, // 壓縮資源
        port: 9000, // 指定服務器的端口號
        open: 'Chrome', // 指定以哪個瀏覽器打開，open:true 代表以默認瀏覽器打開
    },
}

其餘相關屬性，我們可以看看官方文檔，有詳細的解釋：
點擊進入官方配置devServer

4.配置命令（在package.json內）

webpack版本4以上的命令配置如下

5.運行

在終端裡面運行

npm run dev-server

在目錄下沒有編譯的bundle.js文件

其實是有的，webpack-dev-server將我們的文件編譯後，發佈存放在內存內，不在物理磁盤上，例如：我們開啟後，訪問bundle.js是可以訪問到的

安裝html-webpack-plugin

我們的資源文件webpack已經幫助我們編譯放到內存裡面瞭，但是我們index.html依然在物理磁盤上，我需要將index.html同樣放置到內存中，這是我們就需要依賴html-webpack-plugin插件

作用

  • 自動在內存中根據指定頁面生成一個內存的頁面
  • 自動，把打包好的bundle.js追加到頁面中，無需我們手動引用

安裝

通過npm安裝

npm install html-webpack-plugin -D

通過require方法導入模塊，並且在plugins中放置一個模塊對象

運行

運行webpack-dev-server

到此這篇關於webpack-dev-server的安裝使用的文章就介紹到這瞭,更多相關webpack-dev-server使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：