1.什么是webpack
正如官网对webpack的描述，它是一种模块化加载器，当然也不仅仅限于此。某种程度上来说，可以代替某些gulp的功能，至少有些还是无法替代的。在webpack中所有的资源都会被视作模块来处理，为了应对这样的情况，webpack有对应的loader机制来处理，另外shim，plugins，和其他构建工具，一样一样的，更多的细节，需要你在实际的应用中慢慢去体会了。
2.webpack的使用方法
webpack认为一个项目（或者一个页面），总有一个入口文件，就像C语言中总有一个main函数一样。假设，我们创建两个文件./main.js和./query.js，并且将main.js做为我们项目的入口文件。
query.js
module.exports = function(){
var version = 1.0.0;
console.log(version)
}
main.js
var query = require('./query');
query();
创建一个webpack.config.js文件
var config = {
entry:'./main.js',
ouptut:{
path:'./js'
filename:'main.js'
}
}
module.exports = config;
在你的终端上运行webpack即可，默认webpack命令就等于webpack --config webpack.config.js你也可以修改默认的配置文件的名字，像这样：webpack --config webpack.custom.js。
3.webpack配置详解
entry####
entry属性做为可配置的入口，比如上面所写的./main.js。entry有三种写法，每一个入口可以称之为一个chunk。
1.如果为字符串，只会打包一个顺序依赖的模块，输出则根据output配置而定。
entry: __dirname + "/app/main.js"
2.如果为数组，只会打包一个顺序依赖的模块，合并到最后一个模块时导出，输出则根据output配置而定。
entry: [__dirname + "/app/temp.js",__dirname + "/app/main.js"]
3.如果为对象，则会根据入口打包多个顺序依赖的模块，key名会根据在output的配置输出。
entry: {
file1: __dirname + '/app/temp.js',
file2: __dirname + '/app/main.js'
}
output####
输出规则，在此对象中设置。
- path 设置输出的文件路径
- filename 设置输出文件名，filename可以有多种配置，比如main.js，[id].js，[name].js，[hash].js等
- publicPath 设置资源的访问路径
- library 设置模块导出的类名
- libraryTarget:'umd' 设置模块兼容模式,umd模式是兼容commonjs、AMD和CMD的。参数可以有commonjs和amd、cmd、umd可选。
- umdNamedDefine:true 同上
devtool####
将devtool设置为source-map，在开发调试阶段非常有用，它的模式非常多，可自行去搜索了解。
loader####
loader机制应该是webpack中非常重要的部分了，它是一系列资源的最终执行者。一般情况下，你可以访问：webpack loader来访问可用loader列表。
比如现在我想将.html类型的文件，当做一个模块来载入:
npm install raw-loader
module:{
loaders:[
{
test:/\.html$/,
loader:'raw',
exclude:/(node_modules)/
}
]
}
每一个loader都可以用一个对象来描述，test是你的匹配规则，loader是你要载入的loader，exclude是你在执行规则是想忽略的目录。
plugins####
webpack的插件机制也非常的重要，其内置了多种插件，比如混淆，压缩等等。插件列表可以访问：list of plugins。
正常情况下可以使用官方自带的插件：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false//
}
})
当然，我们也可以引入第三方插件，使用你的npm install吧。
resolve####
此配置可以对一些常用模块设置别名，比如a.js放置在./src/module/address/中，每次载入模块需要var a = require('./src/module/address/a');名字非长，如果设置别名了，只需要var a = require('a')；
resolve:{
alias:{
"RequestModel":path.resolve(__dirname,'src/lib/request.model')
}
},
还可以设置访问路径，以及模块载入后缀。
resolve:{
root:path.resolve(filePath,'/src'),
extensions:['','.js']
}
externals####
此项配置可以将某些库设置为外部引用，内部不会打包合并进去。
externals:{
jquery:'window.jQuery'
}
具体解释一下，有的时候我们不希望把有些文件用webpack打包一起使用，而是想用script标签引入的方式使用如
<script scr="jquery.min.js"></script>
引入之后，此时会有window.jquery这个全部变量了，我们使用jquery就可以这样：
var $ = window.jQuery
但是我们希望可以用CMD、AMD等形式来使用jquery怎么办呢？如：
var $ = require('jquery')
可以使用externals来解决:
externals:{
jquery:'window.jQuery',
jquery: true //jquery: 'jquery'一样
}
