Webpack安装教程

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指令学习
• 想看是否安装成功，输入命令webpack -v，出现版本即为成功。
  

---

当然到这一步，我们的webpack的安装，基本就算成功了。

扩展

安装成功node.js之后，我们可以安装一下nrm。

运行命令：npm i nrm，等待安装成功即可。

nrm中有我们常用的镜像地址，输入命令nrm ls即可看到。

nrm的作用非常大，具体的可以参考博客：nrm安装与配置