前言：这篇文章用来记录mac下的webpack安装与使用，以及后续的与webpack相关的一些配置，文章会持续不定期更新，转载请注明出处。
Webpack初体验
一、什么是Webpack
Webpack其实可以看做一个模块打包机，将你项目中的一些浏览器无法直接运行的文件（如 Javascript、Scss）进行打包，使之可直接供浏览器使用。
二、为什么要用Webpack
看到一篇文章很详细说明了使用Webpack的原因，传送门
三、使用Webpack的准备工作以及项目初始化
- 首先需要进行node.js的安装（必备），我安装的是左边这个版本
安装完成之后，打开mac的终端，检查是否成功安装。输入 node -v （-v前有空格）如果已经安装成功，会显示版本信息
- 在桌面新建一个文件夹(我的文件夹名字叫webpack2-test ,这个文件夹就是你要用来打包的项目文件夹，里面除了有你的项目代码，还会有一些npm、webpack的配置文件），然后进入到这个文件夹中，使用 npm init -y 去新建一个初始化的npm相关的配置文件
此时会在你刚新建的文件夹中自动生成一个npm相关的配置文件，用webstorm打开查看，内容如下：
- 在你的项目文件夹中安装webpack。还是刚才的webpack2-test文件夹，输入命令 sudo npm install webpack --save-dev ，进行webpack的安装。（注意：webpack可以全局安装，但是一般都是相对于你的文件夹去进行安装，会比较方便）命令中的 --save-dev 意思是将一些依赖的东西写入刚刚我们创建的package.json配置文件中。
安装完成之后，我们打开项目文件夹可以看到出现了一个新的文件夹node_modules，如下所示，package.json配置文件中也出现了webpack的版本信息
- 除此之外，我们还要安装 webpack-cli 。在项目文件夹目录下输入命令 sudo npm install webpack-cli --save-dev 进行安装
到此步骤时，项目初始化和webpack的安装已经完成。
四、Webpack如何使用
举个简单的例子，我们要对项目中的js文件进行打包。首先在项目文件夹webpack2-test中新建一个文件夹app，用来存放你的项目代码，我们这里新建并且写一个简单的js文件
然后我们回到终端，使用 node_modules/.bin/webpack app/index.js 命令（注意是在webpack2-test项目目录下输入命令），对刚才写的index.js进行打包，如下：
打开项目文件夹，你会发现里面多了一个dist文件夹，以及dist文件夹里面的main.js文件，这里的dist文件夹就是保存你打包后的文件的地方，main.js就是原来的index.js进行打包后生成的对应的js文件。
未完待续