Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
为什么要使用webpack
Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：
1.支持commonJS和AMD模块。
2.支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
3.可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
4.使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
nodejs的安装
因为webpack是基于node.js来工作的所以在学习webpack之前我们应该先安装node.js
node.js的安装步骤非常简单如下安装即可:
1、*载下**nodejs *载下**地址：nodejs.cn
2、安装nodejs非常简单，根据提示一直下一步即可
webpack的安装
一、运行电脑上的cmd（打开方法是：windows+r就会出现右图的窗口，然后输入cmd 回车就可以了）
二、node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。注：未能出现版本号，请尝试注销电脑重试；
三、npm -v 查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器 注：npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等 ）（知道就好不需要记住）
四、安装全局的webpack命令：npm install -g webpack （你的项目在哪个盘就安装的哪个盘的根目录，比如：项目在F盘，我们就可以在 F: 里安装webpack）
五、在你的项目的根目录下创建配置项 npm init 之后一直回车键就好
六、npm install --save-dev webpack安装作为项目开发所需要的依赖项（安装成功后会出现右图现象）
webpack的简单使用（一）
index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）
在我们的项目根目录下创建一个名字为webpack.config.js（一定是这个名字），然后在配置项中写入以下代码：
// “__dirname”是Node.js中的一个全局变量，它指向当前执行脚本所在的目录。
entry表示入口文件
entry:__dirname+'/app/main.js',//入口文件的位置
output:{
path:__dirname+'/public',//打包后文件放置的位置
filename:'bundle.js'//打包后输出文件的文件名
创建一个入口文件main.js我们把它放在名字叫做app的文件夹内，他的作用就是来引入我们的项目文件
greeter.js只包括一个用来向html文件写一句问候的话语。
运行webpack， 在命令行中输入 webpack （入口文件路径） （生成文件的路径）
（注：文件路径相对于我们项目的根目录）
运行成功后会出现如下图所示的样子 刷新页面就会出现“欢迎收看后盾网视频教程”
另一种运行webpack的方法
如果每次运行 webpack都要执行 webpack webpack （入口文件路径） （生成文件的路径）
这样会很麻烦所以我们只需要在 package.json的配置项添加一行配置项就可以了，
“start”:”webpack”, 在命令行的运行中我们只需要运行 npm start 就可以了
（注：因为 start属于特殊名字，当我们起的名字不是start的时候 我们在运行的时候 应输入 npm run 我们起的一个名字 如：npm run hello ）
webpack之loaders
Loaders是webpack中最核心的功能了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
loaders之配置项
Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：
test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
视频链接地址：http://blog.sina.com.cn/s/blog_1671244030102wxpm.html
更多精彩内容请关注 ---- 微信公众号：houdunit
看完不要跑记得出来吐吐槽！╰(￣▽￣)╮