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 国际》许可协议 转载需注明原文做者、连接与版权协议