作用

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

安裝

運(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.編寫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 代表以默認(rèn)瀏覽器打開
    },
}

其余相關(guān)屬性，我們可以看看官方文檔，有詳細(xì)的解釋：
點擊進(jìn)入官方配置devServer

4.配置命令（在package.json內(nèi)）

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

5.運(yùn)行

在終端里面運(yùn)行

npm run dev-server

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

其實是有的，webpack-dev-server將我們的文件編譯后，發(fā)布存放在內(nèi)存內(nèi)，不在物理磁盤上，例如：我們開啟后，訪問bundle.js是可以訪問到的

安裝html-webpack-plugin

我們的資源文件webpack已經(jīng)幫助我們編譯放到內(nèi)存里面了，但是我們index.html依然在物理磁盤上，我需要將index.html同樣放置到內(nèi)存中，這是我們就需要依賴html-webpack-plugin插件

作用

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

安裝

通過npm安裝

npm install html-webpack-plugin -D

通過require方法導(dǎo)入模塊，并且在plugins中放置一個模塊對象

運(yùn)行

運(yùn)行webpack-dev-server

到此這篇關(guān)于webpack-dev-server的安裝使用的文章就介紹到這了,更多相關(guān)webpack-dev-server使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論