大家好，我是IT修真院武汉分院第5期的如何使用webpack学员朱英杰，一枚正直纯洁善良的WEB前端程序员。
1.背景介绍
随着前端开发的不断发展，我们所写的页面越来越u都，js文件页越来越多。
庞大的代码库需要高效的组织，而module开发的系统即为大多数的开发者采取的途径
2.知识剖析
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
3.常见问题
如何使用webpack
4.解决方案
在安装 Webpack 前，你本地环境需要支持 node.js。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
使用 cnpm 安装 webpack：cnpm install webpack -g>
5.编码实战
创建项目
接下来我们创建一个目录 app：
mkdirapp
创建项目
接下来我们创建一个目录 app：
mkdirapp
在 app 目录下添加 runoob1.js 文件，代码如下：
app/runoob1.js 文件
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：
app/index.html 文件
接下来我们使用 webpack 命令来打包：
webpackrunoob1.jsbundle.js
执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：
Hash:a41c6217554e666594cbVersion:webpack1.12.13Time:50msAssetSizeChunksChunkNamesbundle.js1.42kB0[emitted]main[0]./runoob1.js29bytes{0}[built]
在浏览器中打开 index.html，输出结果如下：
6.拓展思考
gulp和webpack有什么区别？
webpack
gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。
webpack
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
7.参考文献
http://www.cnblogs.com/lovesong/p/6413546.htmlgulp与webpack的区别
ppt:ptteng.github.io/PPT/PPT/js-11-How%20to%20use%20webpack.html#/
视频：
