webpack學習(一)專案中安裝webpack

凡塵yang發表於2019-05-22

如何在專案中安裝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 打包工具。

 

相關文章