如何在專案中安裝webpac,webpack-cli?
前提:電腦安裝了 node和npm包管理工具
1 建立專案資料夾或者在已有的專案中開啟終端 輸入相關命令:
npm init
因為已經安裝好了node 的 npm 包管理工具,使用npm 在專案中初始化,使得專案符合 node 規範。
根據終端提示一步一步輸入後
這樣專案資料夾中就會多出一個 package.json檔案,一些專案的基本資訊:專案名稱,版本,描述和javascript指令碼等。
可以新增比如下圖中 "private": true, 意思是專案是私有的,不會發布到npm的線上倉庫。也可以修改javascript指令碼中的配置,比如原始打包命令可能是npx webpack index.js
配置 "bundle": "webpack" 打包的時候執行 npm run bundle
2 專案中開啟終端 輸入相關命令:
(1) 如果是全域性安裝,使用 npm install webpack webpack-cli -g,檢測是否安裝成功 使用 webpack -v / webpack-cli -v
但是很少有這樣全域性安裝的,原因比如你有的專案使用的是webpack 3+的版本,而另一個專案使用的是webpack4+版本,他們互相之間是有衝突的。
當你需要打包3+專案的時候,你需要先解除安裝4+的webpack,然後使用3+的webpack打包。很費勁。
(2 菊部安裝,不對,是區域性安裝,使用npm install webpack webpack-cli -dev---save (等同於 npm install webpack webpack-cli -D)
檢測版本使用 npx webpack -v 。一般預設是安裝最新版本的webpack 如果想安裝歷史版本,可以先檢視一下歷史版本 使用 npm info webpack 然後相應的安裝。
3 專案中開啟終端 輸入 npm install 也可以把專案需要的依賴包都安裝,執行完專案中會多處一個node_modules資料夾。
這樣在專案中加安裝了webpack 打包工具。