1.執行npm install nrm -g，安裝nrm，此模塊主要用于切換npm鏡像源，簡化手動配置步驟

2.執行 nrm ls，可以看到npm源地址列表，當前使用的是默認源，npm https://registry.npmjs.org/

3.執行 nrm use taobao，將npm的源修改為taobao所指向的地址

4.再次執行nrm ls，可以看到npm的源已經指向了taobao源，今后執行npm命令就默認從taobao鏡像拉取模塊

5.執行命令npm config ls：查看npm配置，檢查源是否切換成功

6.在VSCode中打開終端，切換到當前項目根目錄下，輸入npm init -y，初始化項目。初始化完成后會在項目根目錄下生成package.json文件

7.執行npm install webpack -g，安裝全局webpack模塊，安裝完成后才能在終端中輸入webpack命令，否則會提示無法將“webpack”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。

8.執行命令 npm install webpack-cli -g，全局安裝webpack-cli

9.執行命令下面命令，勇webpack將./src/main.js打包生成為./dist/bundle.js文件

【webpack ./src/main.js -o ./dist/bundle.js? --mode development】

注意：-o是webpack 4.x之后新增的選項，低版本不需要加-o，4.x之后如果不加-o就會報錯

--mode development：代表是以開發模式打包，如果不加句，默認以發布模式打包，但是會在終端提示黃色警告信息。

10.之后在Index.html中引用dist目錄下的bundle.js，測試能正確運行。

總結

以上是生活随笔為你收集整理的vscode中安装webpack_VSCode下手动构建webpack项目(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

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