npm install -g cnpm --registry=https://registry.npm.taobao.org 安裝 cnpm 模塊

使用 cnpm 命令
cnpm i webpack-dev-server -D 安裝 webpack-dev-server 把這個工具安裝到項目的本地開發依賴，這個 工具的用法 和 webpack 命令的用法，完全一樣。由于，我們是在項目中，本地安裝的 webpack-dev-server , 所以，無法把它當做 腳本命令，在powershell 終端中直接運行；（只有那些 安裝到 全局 -g 的工具，才能在 終端中正常執行）

使用 npm run dev 命令運行項目，注意事項

要在 package.json 文件中 添加 “dev”: "webpack-dev-server"

檢查相關依賴 webpack-cli 和 webpack 是否安裝
注意，webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中，必須安裝 webpack
如果沒有安裝使用如下命令進行安裝

• npm install webpack-cli -g
• npm install --save-dev webpack
  在安裝以上2個模塊出現錯誤可參考：
  https://blog.csdn.net/qq_44989881/article/details/107711581

使用 npm run dev 運行項目

運行成功后會出現：
S M:\Node.js\07.webpack\2.webpack之plugin配置和使用\1.webpack-dev-server的基本使用\webpack-study> npm run dev

> webpack-study@1.0.0 dev M:\Node.js\webpack > webpack-dev-serverProject is running at http://localhost:8080/ webpack output is served from / Hash: 8c933a449d24372a4e27 Version: webpack 3.12.0 Time: 597msAsset Size Chunks Chunk Names bundle.js 624 kB 0 [emitted] [big] main[1] multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built][2] ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 7.93 kB {0} [built][3] ./node_modules/url/url.js 23.3 kB {0} [built][4] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built][6] ./node_modules/url/util.js 314 bytes {0} [built][7] ./node_modules/querystring-es3/index.js 127 bytes {0} [built][10] ./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js 161 bytes {0} [built][11] ./node_modules/_ansi-regex@2.1.1@ansi-regex/index.js 135 bytes {0} [built][12] ./node_modules/_loglevel@1.6.8@loglevel/lib/loglevel.js 8.61 kB {0} [built][13] ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client/socket.js 1.08 kB {0} [built][15] ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client/overlay.js 3.67 kB {0} [built][21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built][23] (webpack)/hot/emitter.js 77 bytes {0} [built][25] ./src/main.js 4.21 kB {0} [built][26] ./node_modules/jquery/dist/jquery.js 288 kB {0} [built]+ 12 hidden modules

Project is running at http://localhost:8080/ ：瀏覽器訪問http://localhost:8080/ 即可看到運行的項目，并對項目中的文件可以進行訪問。

注：
webpack-dev-server 幫我們打包生成的 bundle.js 文件，并沒有存放到實際的物理磁盤上；而是，直接托管到了電腦的內存中，所以，我們在項目根目錄中，根本找不到這個打包好的 bundle.js；我們可以認為，webpack-dev-server 把打包好的 文件，以一種虛擬的形式，托管到了項目的 根目錄中，雖然我們看不到它，但是，可以認為 和 dist src node_modules 平級，有一個看不見的文件，叫做 bundle.js。
在項目中直接引用根目錄的 bundle.js 即可。

每次修改文件項目中開發文件進行保存時，進行項目都會同步更新，無需重啟和重新打包編譯。

webpack: Compiling... Version: webpack 3.12.0 Time: 18msAsset Size Chunks Chunk Names bundle.js 624 kB 0 [emitted] [big] main[21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built][25] ./src/main.js 4.21 kB {0} [built]+ 25 hidden modules webpack: Compiled successfully.

使用 npm run dev2 運行項目

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

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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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