前端打包工具一开始是require.js，那么先对
webapck 和require进行一个比较
require.js比较老
前端的语言标准：commonjs 和ADM//commonjs主要是后台模块化标准（node），AMD是前端的模块化标准。由于commonjs比较简单因此越来越多的前端开发人员开始使用commonjs，require.js主要支持AMD，使用commonjs可以使用npm的pakage库，现在npm已经俨然成为前端的库。require.js 不支持npm
还有一个browserify，但是对AMD虽然可以通过插件支持但是从一开始的设计理念只是支持commonjs。但是webpack对commonjs和AMD规则都支持，同时支持es6的import模块引用方式
在webpack.config.js文件中进行配置，entry 和output
var path=require（‘path’）
var webpack=require('webpack')
module.exports={
entry:{
admin:'./admin/index.js',
consumer:'./consumer/index.js'
},
output:{
path:path.join(__dirname,"dist"),
filename:'[name].bundle.js'，
publicPath:'/dist/'//请求文件的url
},
plugins:[
new webpack.optimise.uglifyJsPlugin()//压缩代码
]
}
可以看出有多个entry入口文件（一般多文件应用会出现多个入口），webpakck会分别打包，都会打包进入到dist文件夹下， filename 的可以区分开通过【name】//默认如数是入口文件的key值，在上面案例中分别是admin和consumer 执行打包webpack-dev-server 如果报错说明是webpack-dev-server不是global的一种方式是走局部的webpack，也就是在package.json中的
script{
start:'webpack-dev-server --progress --color'
}这样只是局部
loaders file/url loader 针对file（文件loader）可以把图片打包，打包路径依赖output 的publicPath是一个文件，如果是url loader的话会把一张图片修改成base64减少一个请求
