什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
为什么要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
- 模块化，让我们可以把复杂的程序细化为小的文件;
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
- Scss，less等CSS预处理器
- …
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
安装WebPack
安装Webpack首先要下载node.js，官方下载地址：node.js 中文网
根据你的电脑系统选择相应的版本进行下载即可，安装的过程直接默认就行，一直点击下一步直到安装成功即可。安装成功之后即可通过左下角开始按钮，找到node.js文件夹打开。
如果是windows系统，也可以通过windows键+R快捷方式打开运行命令，输入cmd，按回车键，也是可以的。
node -v
查看安装的node.js版本，出现版本号说明刚才已经成功安装node.js
npm -v
查看npm的版本号，npm是安装node.js时一同安装的nodejs包管理器
TIPS
npm是node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
首先在你的电脑创建一个空文件夹learnwebpack，下面我们在这个文件夹内安装Webpack，通过命令行工具找到你创建的learnwebpack文件夹，然后通过下面的指令在此文件夹内安装Webpack
npm install -g webpack
node.js安装完成之后就可以安装Webpack了，首先打开node.js命令板并且输入以下命令就可以完成安装了。你的项目在哪个盘里面，就找到哪个盘输入这个命令。
npm init
在项目目录里面创建配置项，一直按回车即可，
npm install --save-dev webpack
安装作为项目开发所需要的依赖项
发表评论