webpack 跟gulp的原理其实是一样的，webpack通过react的大热又火了起来，所以，我们是有必要学习一下滴。下面我就把webpack经常用的知识写下来。
new htmlWebpackPlugin({
template: path.resolve(ROOT_PATH, 'index.html'),
filename: 'index.html',
inject: 'body'
})这个插件的作用是动态的生成一个html，同时会把其中依赖的css、js动态的添加到html中，比较方便。以前的做法，是我们确定了css、js的名称后，手动的根据路径来加在html中。这个插件省了手动添加的时间。
这个插件的作用是把分散的css提取到一个文件中，后面会有它的用法
new ExtractTextPlugin('style.css', {allChunks: true} )意思是把所有的分散的css提取到一个叫style的css中
new OpenBrowserPlugin({url: 'http://localhost:8081/'})这个插件的作用是自动启动页面，并且页面的url就是我们定义的，这样让又节省了我们一部分时间。
这个属性定义文件的入口
entry: [
'webpack/hot/dev-server',
path.resolve(APP_PATH,'main.js')
]上面的意思是，在开始执行的时候执行文件热重载功能，并且确定文件的入口是main.js
output: {
path: BUILT_PATH,
filename: '[name].[hash:6].js'
},output 是js文件产出路径,[name].[hash:6] 的意思是，文件中的js叫什么名，产出的也叫什么名，并且加上了哈希值，设定hash的位数是6位。当然，长点短点都是可以的。
定义模块，其中重要的是 loaders（加载器）
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {presets: ['es2015','react']}
},
{
test: /\.jsx$/,
loader: 'babel',
query: {presets: ['es2015','react']}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader','css-loader')
},
{
test: /\.less$/,
loader: 'style!css!less?sourceMap'
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url?limit=8192'
}
]
}介绍上面写的加载器。第一个babel是转换es6语法的，test是指对哪个类型的进行处理；exclude是指哪个类型或者文件不需要进行处理;query是指将es2015和react中的语法进行编译成浏览器能够识别的。
第3个是style-loader和css-loader。 style-loader的作用是将css插入到页面的style标签，css-loader是处理css文件中的url()等。loader的加载顺序是从右向左的，所以放的顺序有要求。
第4个是处理less文件的。style!css!less的 ！是‘和’的意思
第5个是处理图片的，url-loader的作用是将小于某个值得图片转成base64 。比如这个例子是将小于8k上面类型的图片转成base64
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
}这里是对babel进行了针对性的处理，其中的transform-runtime插件的作用是 避免 babel 编译的工具函数在每个模块里重复出现，减小库和工具包的体积；
当然这里只是解释了我在项目中用到的这些比较常用的部分，希望能对大家有所帮助。
webpack里面我们用的所有的插件、程序，是需要用npm安装的。这些都在对应的package.json里
这里着重说一下package里的scripts
"scripts": {
"start": "webpack-dev-server --hot --inline --port 8081 --config webpack.config.base.js",
"build": "webpack --progress --profile --colors --config webpack.config.base.js"
}当我们在命令行中执行 npm run start时，实际上就是执行了这里。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent