Webpack教程（2）： Webpack安裝

Webpack的安裝分爲全局安裝與本地安裝，上一節咱們使用的是本地安裝，咱們也推薦使用本地安裝。

那麼全局安裝的Webpack與本地安裝的有何不一樣呢？

全局安裝的Webpack，在任何目錄執行webpack命令均可以進行打包。而本地安裝的Webpack，必需要找到對應node_modules下的webpack命令才能執行（在使用npx或package.json的scripts的時候，會自動幫助咱們尋找）。

那爲什麼推薦本地安裝呢？主要是考慮Webpack版本不一致的問題，看完下面的內容就更容易理解了。

Webpack須要先安裝Node.js，沒有安裝的話，先去Node官網安裝最新穩定LTS版本的Node。

接下來開始安裝Webpack。

1、Webpack全局安裝

1.下方第一個命令是全局安裝Webpack及其命令行工具webpack-cli，安裝的版本是最新穩定版本。若是要安裝指定版本，能夠在安裝的包名後面加上@x.x.x這種形式的版本號。

webpack包是webpack核心npm包，webpack-cli是命令行運行webpack須要的npm包。

# 全局安裝最新穩定版本
  npm install webpack webpack-cli -g

# 全局安裝指定版本
  npm install webpack@4.43.0  webpack-cli@3.3.12 -g

咱們安裝的是webpack4，目前對應的webpack-cli版本是3，在咱們使用的時候，這兩個包都必須安裝。在webpack3時代，咱們不須要安裝webpack-cli。

2、Webpack本地安裝

本地安裝最新穩定版本的命令以下

# 本地安裝最新穩定版本，該命令是npm install webpack webpack-cli --save-dev的縮寫
  npm i webpack webpack-cli -D

本地安裝指定版本的方式與全局安裝的同樣，都是包名後面加@x.x.x這種形式的版本號。

在學習本教程的時候，建議安裝與教程裏一致的版本，便於學習。

全局安裝與本地安裝的Webpack是能夠共存的。在大多數前端項目開發的時候，是須要本地安裝的。由於只進行全局安裝的話，可能由於版本不一致的問題致使本地項目跑不起來。

全局安裝的Webpack，在任何目錄執行webpack命令均可以進行打包。而本地安裝的Webpack，必需要找到對應node_modules下的webpack命令才能執行，所以通常須要拼接路徑。

本地安裝的Webpack，若是不想拼接路徑，咱們可使用命令npx webpack，或者在package.json文件裏寫入下面的命令並執行npm run dev。這兩種方式都會自動執行node_modules下的webpack命令，不須要咱們把路徑拼接上。

// ...
  "scripts": {
    "dev": "webpack"
  },
  // ...

3、小結

本節講了Webpack的全局安裝與本地安裝。本教程推薦本地安裝Webpack，以免版本不一致致使的問題，使用npx webpack既可進行打包。

博客： 姜瑞濤的官方網站
原文連接： https://www.jiangruitao.com/w...
版權採用 《署名-非商業性使用-禁止演繹 4.0 國際》許可協議 轉載需註明原文做者、連接與版權協議