第一種直接在package.json文件中的"scripts"里添加：

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

• open：每次運行項目自動打開瀏覽器
• port：指定項目運行占用的端口號
• contentBase ：項目啟動首次訪問的目錄
• hot：iframe 熱替換模式，減少大量代碼重復更新

第二種在 webpack.config.js 文件中進行配置：

const path = require('path')// 啟用熱更新的 第2步 const webpack = require('webpack'); // 加載 webpack 模塊module.exports = {entry: path.join(__dirname, './src/main.js'),// 入口output: { // 輸出文件相關的配置path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個目錄中去filename: 'bundle.js' // 指定 輸出的文件的名稱},devServer: { // 配置 dev-server 命令參數的第二種形式 // --open --port 3000 -contentBase src -hotopen: true, // 自動打開瀏覽器port: 3000, // 設置啟動時候的運行端口contentBase: 'src', // 指定托管的根目錄hot: true // 啟動熱個新的 第1步},plugins: [new webpack.HotModuleReplacementPlugin() // new 一個熱更新的模塊對象，這是啟用熱更新的第三步] }

package.json文件中的"scripts"里添加

"dev": "webpack-dev-server"

使用 npm run dev 運行項目

如果缺少相應模塊可根據 https://blog.csdn.net/qq_44989881/article/details/107714969 進行配置

總結

以上是生活随笔為你收集整理的Node.js webpack-dev-server配置命令的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。