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

更新時間：2023年02月07日 08:58:49 作者：窮少年

這篇文章主要介紹了webpack-dev-server的安裝使用教程，大家有個前提條件要清楚webpack-dev-server依賴webpack，我們需要先安裝webpack，本文結(jié)合實例代碼詳細講解,需要的朋友可以參考下

作用

相當(dāng)于在本地開啟了一個服務(wù)，我們可以通過http網(wǎng)絡(luò)請求訪問
提高了IO性能，因為webpack-dev-server將我們的文件編譯后放到內(nèi)存里面，以空間換時間
無需我們每次都需要手動編譯我們的文件，我們每次保存文件，就會自動的幫助我們編譯發(fā)布（注意：webpack4以上，也可以通過開啟watch屬性實現(xiàn)這個功能）

安裝

運行環(huán)境

“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', //開發(fā)模式
    // mode:'production',//生產(chǎn)模式

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