Webpack教程 - Webpack安装

Webpack的安装分为全局安装与本地安装，上一节我们使用的是本地安装，我们也推荐使用本地安装。

那么全局安装的Webpack与本地安装的有何不同呢？

全局安装的Webpack，在任何目录执行webpack命令都可以进行打包。而本地安装的Webpack，必须要找到对应node_modules下的webpack命令才能执行（在使用npx或package.json的scripts的时候，会自动帮助我们寻找）。

那为何推荐本地安装呢？主要是考虑Webpack版本不一致的问题，看完下面的内容就更容易理解了。

Webpack需要先安装Node.js，没有安装的话，先去Node官网安装最新稳定LTS版本的Node。

接下来开始安装Webpack。

一、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。

二、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"
  },
  // ...

三、小结

本节讲了Webpack的全局安装与本地安装。本教程推荐本地安装Webpack，以避免版本不一致导致的问题，使用npx webpack既可进行打包。

博客：姜瑞涛的官方网站
原文链接：https://www.jiangruitao.com/webpack/
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议