快捷導(dǎo)航

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

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

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

作用

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

安裝

運(yù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.編寫(xiě)webpack.config.js

因?yàn)閣ebpack-dev-server完全依賴于webpack，所以我們需要編寫(xiě)webpack的配置文件
例如：

// path 模塊解決項(xiàng)目路徑問(wèn)題
const path = require('path')
module.exports = {
    //打包模式，一定要配置，不然打包速度慢很多
    mode: 'development', //開(kāi)發(fā)模式
    // mode:'production',//生產(chǎn)模式

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