当自己在学习webpack的时候，在网上发现中文的很详细的教程很少，于是便想将自己学习webpack的笔记记录整理下来，便有了这篇文章，希望对大家有所帮助，如果有错误，欢迎大家指出。
在我们开始之前
webpack有多种加载器(Loader后面会介绍),可以处理各种需要被处理的静态文件
webpack支持CommonJsAMDCMD规范
在使用webpack的项目中，默认配置文件为webpack.config.js，模块文件，和Node写法一样，对外暴露接口,主要属性有:
plugins插件项entry入口文件配置项output对应输出项配置module.loaders最关键的配置，告知webpack不同的文件需要什么加载器进行处理
模块系统的几种类型
script标签类型缺点全局作用域下造成变量的冲文件加载顺序很重要模块与模块之间的依赖要解决在大型项目中难以维护和管理CommonJs优点服务端模块能够重复利用有优秀的包管理工具npm简单，上手容易缺点不适合浏览器端的使用不能做到并行加载模块AMD优点适合浏览器的异步加载机制并行加载模块缺点代码难以经营和维护ES6优点未来的ES规范缺点浏览器对ES6的支持还需要一段时间能够依赖的现有的模块少
转换的思想
模块要能够在客户端中去执行，则必须将它们从server=browser
极端的想法
一个请求一个模块只有需要的模块会被转换，但是耗费资源，时间长所有请求都在一个模块不需要的模块也会被转换时间短，耗费资源少
分块转换的想法
将众多的模块切成许多片，在初始化时的请求不会包括完整的代码，并且在初始化时不需要的模块切片会在后续加载过程中按需加载。并且将模块化的切片方式是可以有开发人员自己定义的。
wepback它的目标是是什么？
webpack它能将依赖的模块转化成可以代表这些包的静态文件
它的目标有
将依赖的模块分片化，并且按需加载解决大型项目初始化加载慢的问题每一个静态文件都可以看成一个模块可以整合第三方库能够在大型项目中运用可以自定义切割模块的方式
webpack较之其他类似工具有什么不同？
有同步和异步两种不同的加载方式Loader,加载器可以将其他资源整合到JS文件中，通过这种方式，可以讲所有的源文件形成一个模块优秀的语法分析能力，支持CommonJsAMD规范有丰富的开源插件库，可以根据自己的需求自定义webpack的配置
webpack为什么要将所有资源放在一个文件里面？
我们知道，对于浏览器来说，加载的资源越少，响应的速度也就越快，所以有时候我们为了优化浏览器的性能，会尽可能的将资源合并到一个主文件app.js里面。但是这导致的很大的缺点：
当你的项目十分庞大的时候，不同的页面不能做到按需加载，而是将所有的资源一并加载，耗费时间长，性能降低。会导致依赖库之间关系的混乱，特别是大型项目时，会变得难以维护和跟踪。比如:哪些文件是需要A模块加载完后才能执行的？哪些页面会受到多个样式表同时影响的？等许多问题。
而webpack可以很好的解决以上缺点,因为它是一个十分聪明的模块打包系统，当你正确配置后，它会比你想象中的更强大，更优秀。
开启wbpack之旅
安装webpack
我们可以直接使用npm进行全局安装npminstallwebpack-g在常规项目中把webpack依赖加入到package.jsonnpminitnpminstallwebpack--save
更详尽的安装方法个可以参考webpack安装
webpak命令行常见使用的操作
启动
webpack
如果你想当改变一个文件而让webpack实时编译
webpack--watch
如果你想把默认的配置文件webpack.config.js改成自定义文件
webpack--configcustomconfig.js
webpack的用法
首先先贴上一个比较完整的webpack.config.js的代码，再详细介绍：
//webpack.config.jsvarpath=qui(path)varwebpack=qui(webpack)module.exports={entry:[./src/index],output:{path:path.join(__dirname,dist),filename:bundle.js},plugins:[newwebpack.optimize.UglifyJsPlugin({