个人接触前端并不是很久，对于webpack却是久仰大名，也难怪， 作为一款优秀的模块加载器兼打包工具，webpack近来风头可谓一时无二，自己也想着学习并希望能够了解其工作方式和理念，抛开跟风不谈，至少学习新的技术对自己是大有裨益的。
引用一张webpack官网的图片，作为一款模块打包器，webpack负责分析模块间的依赖关系，随即将模块按照不同的加载器规则生成相对应的资源。我们需要模块化工具为我们做的，包括初始加载量少，按需加载，自定义打包逻辑等功能功能，webpack都能够满足，它的loader加载器可以将各种类型的资源转换成我们所需要的模块，其丰富的插件系统也让我们自定义需求。
安装
//node 环境自不必多说
//全局安装webpack
npm install -g webpack
//进入项目目录
//生成package.json
npm init
//安装webpack依赖
npm install webpack --save-dev基本使用
//静态页面：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" ></script>
</body>
</html>//JS文件入口：entry.js
document.write("Hello world. ")编译 entry.js 并打包到 bundle.js,于命令行输入
webpack entry.js bundle.js随即你会看到命令行会显示日志，提示你打包成功，打开浏览器运行index.html，你会看到Hello world.
配置
var webpack=require("webpack");
module.exports={
//页面入口设置
entry:"./entry.js",
//入口文件输出配置
output:{
path:__dirname,
filename:"bundle.js"
},
module:{
//加载器配置
loaders:[
//加载器可以使用简称例如style,其具体规则可见webpack的resolveLoader.moduleTemplates api
//.css 文件使用style-loader和css-loader加载器来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//图片文件使用url-loader加载器来处理，小于8kb的话则转换成base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//插件项配置
plugins:[
//为bundle.js头部添加注释信息
new webpack.BannerPlugin("this file is created by cala")
]
}webpack.config.js配置基本上存在于每一个使用webpack项目中，作为一个配置项，告诉webpack它的具体功能，包括加载器作用与插件项的功能，所有的加载器都是通过npm来加载，可以阅读相应的文档来了解不同加载器所提供的功能。
执行
webpack --watch启动监听模式，如此便可以避免在每次修改模块后都重新编译，开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译
npm install webpack-dev-server -g使用webpack-dev-server构建本地服务器，在浏览器输入localhost：8080会以监听模式自动运行webpack
关于webpack还有很多令人惊奇的地方，看官方文档可以知道很多关于webpack的工作原理或者是其相关的周边生态，道阻且长，也希望自己能够不断的学习新的技术，未来能够用于项目中，更深的体会其原理跟奥妙。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。