webpack安装

110 阅读1分钟

安装Webpack前的准备工作:

  1. 由于 webpack 执行打包压缩时依赖 nodeJS,先确保你的系统安装了nodeJS 5.0.0 及以上的版本。
  2. 因为 npm 是 nodeJS 平台默认的包管理工具,这里用 npm 安装 webpack。 全局安装:安装Webpack到全局后,可以在任何地方共用一个Webpack可执行文件,而不用各个项目重复安装。

局部安装:(推荐)安装到某个项目中,可防止不同项目依赖不同版本的 Webpack 而导致冲突。

全局安装 Webpack

npm i -g webpack

安装指定版本

npm i -g webpack@<version>

如果你使用 webpack 4+ 版本,还需要安装 webpack-cli(webpack):

npm i -g webpack-cli

查看版本,验证安装成功

webpack -v

局部安装 Webpack 到项目

1.从当前目录中提取的信息生成默认的package.json

npm init -y或者npm init --yes

2.在项目中安装 webpack

--save-dev: 安装到项目的依赖中 | 简写:-D

安装最新版本npm i -D webpack

安装指定版本npm i -D webpack@<version>

  1. 安装成功后,打开package.json文件查看 webpack 是否已经安装,并且查看 webpack 安装的版本。

  2. 安装 webpack-cli

npm i -D webpack-cli

  1. 验证成功 我们可以进入项目的node_modules/.bin/webpack访问webpack的bin版本。

查看webpack版本node_modules/.bin/webpack -v

查看webpack-cli版本node_modules/.bin/webpack-cli -v

因为是局部安装,要进入依赖包执行webpack的命令才有效,否则会被认为命令无效。 或者,使用 npm 包执行器 npx 可以自动找到对应的包执行命令(一般安装了npm会自动安装npx),有了这个工具,执行局部的webpack命令就没有那么冗长了。

npx webpack -v