webpack是啥
webpack是一款强大的前端模块管理和打包工具。类似broserify工具，但是功能更强大。
- 同时支持CommonJS和AMD模块（这两者是js模块管理的两大规范，CommonJS是同步加载，后者是异步加载通过requireJS等工具用于前端）
- 串联式模块加载器及插件机制，有更好灵活性和扩展性
- 可以基于配置智能分析打包多个文件，实现公共模块按需加载
- 在内存中打包，性能更快
webpack将项目中的一切资源都视为模块，分析其依赖，而生成静态资源。
//webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: { a: "./a", b: "./b" },
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
//
}
plugins:{
//
}
resolve:{
//
}
}
entry参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。
output参数是个对象，定义了输出文件的位置及名字,
像上面就会在指定目录中输出a.js和b.js
Loaders（模块加载器）
这是webpack里最重要的特性，除了纯js外，每种资源都可以通过对应的加载器处理成模块，这样我们就可以通过require来加载任何类型的文件或模块，比如CoffeeScript/less/sass/图片等。而且，webpack的加载器之间可以串联，通过感叹号连接，一个加载器的输出可以成为另一个加载器的输入，顺序是从右向左。比如less文件通过less-load处理成css，然后通过css-loader加载成css模块，最后由style-loader加载器对其最后处理可以应用到最终浏览器环境。
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel?presets[]=es2015&presets[]=react'
}, {
test: /\.less$/,
loader: 'style-loader!css-loader!postcss-loader!less-loader'
}, {
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
}]
}
test:以正则表达式指定文件，exclude：指明忽略检测哪些文件夹中的内容，loader:就是要使用的加载模块。其中
loader:'babel?presets[]=es2015,presets[]=react'
babel可以支持ES6和react语法的转换，
问号指的是查询使用的参数，也可以写成:
loader:'babel',
query:{
presets:['es2015','react']
}
css相关的
css-loader是加载我们的css
style-loader把读取到的css内容全部插入到页面
使用preLoaders和postLoaders
preLoaders是在loaders执行之前处理的，postLoaders是loaders之后执行。我们在书写的时候可以在preLoaders中添加jshint来检查自己的代码是否合乎规范。
module:{
preLoaders:[{
test:/\.js$/,
exclude:/node_module/
loader:'jshint-loader'
}]
...
},
//配置jshint的选项，支持es6的校验
jshint: {
"esnext": true
},
plugins
当loaders不能满足我们的开发需求时，plugins为我们提供了丰富的插件系统。
plugins: [
//抽离出公共部分
new webpack.optimize.CommonsChunkPlugin("common", "common.js"),
//独立出css样式
new ExtractTextPlugin(
path.join('../../stylesheets', project, "/[name].css")
)
//webpack提供的插件，可将全局变量插入到所有代码中
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
resolve
webpack在构建包的时候会按目录进行文件查找，属性中的
extensions数组中用于配置程序可以自行补全哪些文件后缀;
alias 为模块别名定义，方便后续直接引用别名，无须多写长长的地址
resolve: {
extensions: ['', '.js', '.json', '.scss'],
alias: {
'underscore.js': path.resolve(__dirname, '../src/vendor/underscore/underscore.js'),
}
}
【参考】
这是更完整的讲解入门webpack的文章：http://www.ido321.com/1646.html
这篇讲的也很详细：https://zhuanlan.zhihu.com/p/20397902
这是webpack开发中的实践总结，系列干货文章：
http://www.jianshu.com/notebooks/4015198/latest