Webpack安装教程
简单了解
- Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
- Webpack就是可以分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(less,Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
- 使用webpack可以让前端开发变得迅速,简单,高效。对于webpack想要了解更多知识,可以去看看Webpack官网。
Webpack的安装
要安装webpack,首先要安装 Node.js, 并且Node.js 自带了软件包管理器 npm。Node.js安装包下载
注意:Webpack 需要 Node.js v0.6
以上支持,基本上我们下载最新版的Node.js即可 。
第一步:安装Node.js
-
安装Node.js最简单,在官网下载了Node.js的安装包之后,一路点击下一步,直至安装成功。
-
注意:因为Node.js安装过程中牵涉到Node环境的配置【无需手动配置】,所以不建议把Node.js安装在C盘之外的其他盘里,避免出现不必要的问题。
-
Node.js安装完成之后,检测是否安装成功,打开
DOS命令运行窗口【开始菜单输入cmd】
-
输入命令:
node -v
或npm -v
只要出现版本号就代表安装成功了。【版本可能不一致,这个不是问题】
-
当然
npm
是国外的,下载东西有点慢,我们可以使用cnpm
这是国内的。 -
下载cnpm:
npm i cnpm -g
i
是英文install
的缩写,-g
代表全局安装,-D
代表本地安装。- 全局安装意味着我们安装过后,在任何一个文件夹下都能使用,而本地安装则是把东西安装到指定的文件夹里,当然使用也只能在这个文件夹下使用。
第二步安装webpack打包工具
- webpack官网建议把webpack进行本地安装,这可以使我们在引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。
- 但是对于一个初学者来说,我建议先对webpack进行全局的安装【全局安装是默认的】,毕竟学习的阶段我们需要的是稳。
- 注意,如果你安装的是webpack v4+,那么你还需要下载一个CLI。
下面进入正题,安装webpack:
- 还是打开dos窗口,输入
npm i webpack -g
,等待安装完成即可。- 如果是4+版本,下载CLI,输入命令
npm i webpack-cli -g
- 如果想指定版本,输入命令:
npm i webpack@3.6.0 -g
- 有兴趣可以去学习一下npm的常用指令,很有帮助。npm指令学习
- 如果是4+版本,下载CLI,输入命令
- 想看是否安装成功,输入命令
webpack -v
,出现版本即为成功。
当然到这一步,我们的webpack的安装,基本就算成功了。
扩展
安装成功node.js之后,我们可以安装一下nrm
。
运行命令:npm i nrm
,等待安装成功即可。
nrm
中有我们常用的镜像地址,输入命令nrm ls
即可看到。
nrm的作用非常大,具体的可以参考博客:nrm安装与配置