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,測試能正確運行。