Webpack的正确安装方式

webpack的环境搭建

:::warning webpack是基于node.js开发的模块打包工具，所以它本质上是通过node实现的。 :::

安装node.js环境

在我们安装nodejs的时候，尽可能安装最新的稳定版nodejs 因为提升webpack的打包速度有两大因素：

• node的最新版本
• webpack的最新版本

node以及npm的命令

💡 注意，npm工具是连同node一起下载回来的

安装webpack

npm init 项目初始化

:::success 它可以帮助我们以node规范的形式，创建一个node的包文件。
也就是我们的依赖项 package.json ::: :::success 也可以通过npm init -y 会自动生成一个默认的配置项 :::

{
  "name": "webpack-demo", // 包的名字
  "version": "1.0.0",  // 当前版本
  "description": "描述", // 包的描述
  "private": true,  // 表示当前项目是一个私有的项目，不会发布在npm的线上仓库去
  // "main": "index.js", // 因为我们这个项目是私有项目，所以没必要暴露一个js文件，可以去掉
  "scripts": {},
  "author": "chenYongRen",
  "license": "ISC" // 是否开源
}

项目初始化之后，我们就可以来安装webpack了

正式安装webpack

webpack的安装有两种方式：

1. 全局安装 npm install webpack webpack-cli -g
2. 局部安装 npm install webpack webpack-cli -D 等价于 —save-dev

全局安装

全局安装就是在你的本地全局进行安装，这样会有一个坏处。 打个比方，你今天家里来朋友了，然而你家只有螺蛳粉。其中有一个朋友对螺狮粉过敏。那么要么就是你不吃螺狮粉，要么就是把你朋友赶走。

全局安装webpack也会有这种问题，当系统里面有两个项目，一个用webpack3, 一个用webpack5, 如果你全局安装的是3，那么5肯定就无法执行。反之也是如此。

所以只能进行取舍。删掉其中一个版本，保留其中一个版本 npm uninstall webpack webpack-cli -g 卸载

全局安装下，我们可以使用webpack -v来查看当前系统的webpack版本

局部安装

所以鉴于全局安装带来的影响。局部安装就变得很有必要，在项目文件夹里面进行安装。 npm install webpack webpack-cli -D

安装成功后，就会多出一个node_modules,这里面就是webpack以及它所依赖的包都安装在这里

webpack -v失效

如果此时，我们想查到当前项目的webpack 版本，是没办法通过webpack -v去实现的。

:::warning 因为，当我们输入webpack命令的时候，node会尝试在全局的模块的目录中查找webpack。
但此时我们并没有把webpack安装到全局。而是安装到项目目录下。 :::

npx webpack -v

node 提供一个npx的命令。 npx webpack -v

npx webpack -v 会帮助我们在当前项目中目录的node_modules文件夹里去找webpack的包

安装特定版本号

局部安装的好处：就是可以在不同项目中使用不同的webpack版本。 :::success npm install webpack@版本号 / @4.16.5 webpack-cli -D
例如：
npm install webpack@4.16.5 webpack-cli -D :::

如果我想安装某个版本号，又不确定该版本号是否存在 可以用 npm info webpack 来查找版本号