安装 Webpack

安装Webpack前需要做的准备工作：

由于 webpack 执行打包压缩时依赖 nodeJS，先确保你的系统安装了nodeJS 5.0.0 及以上的版本。

因为 npm 是 nodeJS 平台默认的包管理工具，这里用 npm 安装 webpack。

Webpack有两种安装方式：

全局安装：安装Webpack到全局后，可以在任何地方共用一个Webpack可执行文件，而不用各个项目重复安装。
局部安装：（推荐）安装到某个项目中，可防止不同项目依赖不同版本的 Webpack 而导致冲突。

全局安装 Webpack

安装Webpack：

# --install：安装 | 简写：i
# --global: 全局 | 简写：-g
# 安装最新版本
npm i -g webpack
# 安装指定版本
npm i -g webpack@<version>

如果你使用 webpack 4+ 版本，还需要安装 webpack-cli（webpack）：

npm i -g webpack-cli

查看版本，验证安装成功：

webpack -v

局部安装 Webpack 到项目

首先，用 npm 在项目的根目录创建一个package.json文件：
```
# 从当前目录中提取的信息生成默认的package.json
npm init -y
# 或
npm init --yes
```
出现一串文本表示执行成功：
在项目中安装 webpack：

   # --save-dev: 安装到项目的依赖中 | 简写：-D# 安装最新版本npm i -D webpack# 安装指定版本npm i -D webpack@<version>

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

由于 webpack 4.x 以上将命令相关的内容都放到了 webpack-cli，所以还需要安装 webpack-cli。
安装 webpack-cli。
```
npm i -D webpack-cli
```
在package.json文件中，devDependencies中能够看到webpack-cli的版本信息。
验证成功
我们可以进入项目的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
```

安装 Webpack相关推荐

linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
安装webpack以及webpack-dev-server
安装webpack 1.安装之前要确保已经安装了最新版的Node.js和NPM 2.首先,创建一个目录,比如demo,然后使用npm初始化配置: npm init 执行后,会有一系列选项,可以根据自己 ...
vuejs单文件组件：安装 webpack 和 vue-cli
安装 npm npm 全称为 Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行.支持的第三方模块最多的包管理器. npm -v 由于网络原 ...
node 安装 webpack
首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持,建议使用最新版 Node.js. 用 npm 安装 Webpack: ...
Mac安装webpack报错gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1解决
安装webpack ,报错提示 gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ER ...
Mac系统下安装webpack,cnpm,vue-cli
Mac自带安装了npm node,无需自己安装,如果你的Mac没有安装node,可以去node官网下载,下载链接为: node下载地址安装过程很简单,安装完之后查看版本 node -v[查看node ...
mac上安装webpack报错解决方法Hit error EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/webpack
mac上安装webpack报错解决方法Hit error EACCES: permission denied, mkdir '/usr/local/lib/node_modules/webpack 参 ...
安装webpack命令环境
1.通过cnpm安装webpack命令环境,如图 2.安装完后查看webpack的版本,如图转载于:https://www.cnblogs.com/carriezhao/p/6836839.html
安装webpack出现“Refusing to install package with name webpack under a package”
安装webpack出现"Refusing to install package with name "webpack" under a package" npm ...
安装webpack及使用
前言你是否也是只会运用框架中集成好的Webpack配置呢?你明白每一项的意义么?你懂多少Webpack的个性化配置项呢?本篇文章为你讲解Webpack中的各种配置项参数及作用! 文章目录了解Web ...

安装 Webpack

全局安装 Webpack

局部安装 Webpack 到项目

安装 Webpack相关推荐

最新文章

热门文章