wbpack是一个静态模块打包器，它将项目当做一个整体，通过一个指定的入口文件（main.js），找到项目所有依赖的相关文件，并通过loader处理他们，最终打包成一个多或多个浏览器可识别的js文件。
webpack.config.js的配置
let webpack=require('webpack');
module.exports={
entry{
app: './js/app.js',
vendor: ['./js/moduleA', './js/moduleB']
}, //入口文件（单入口）
output:{
//_dirname获取当前模块所在目录的完整绝对路径
path: path.resolve(__dirname, './dist/js'), //编译到当前目录，这个目录要求要绝对路径
filename: '[name].[chunkhash].js', //编译后的文件名字
},
module:{
rules:[ //通过正则表达式匹配不同后缀的文件，使用不同的加载器
{
test:'/.css$/',
loader:'style-loader!css-loader'
}
]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'] //将公共模块提取，生成名为‘verdors’的chunk
}),
],
resolve: {
extensions: ['.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
},
devServe:{ //配置服务，通过'webpack-dev-server'插件
port:'8088',//配置端口号
hot:true, //启用热更新
inline:true //此模块支持热模块替换（即指替换更新的部分，而不是整个页面重载）,
proxy:{ //设置代理
'/api':{
target:'实际请求地址', //目标代理
changeOrgin:true, //改变源到url
pathRewrite:{'^/api':''} //重写路径
secure:true //允许https
}
}
}
};
1、css-loader:加载css，支持模块化、压缩、文件导入等特性；
2、style-loader：往html中插入<style>标签
3、babel-loader：把es6转换为s5
4、file-loader：把文件输出到一个文件夹中，通过相对url路径去引用输出的文件
5、url-loader：把小图片转换为base64文件
6、slint-loader：检查js代码
Define-plugin：定义环境变量
HtmlWebpackPlugin：自动生成html
UglifyJsPlugin：压缩js
SplitChunksPlugin：代码切割，提取公共代码
BundleAnalyzerPlugin：模块分析
loader：帮助webpack加载和解析非js文件。
plugin：扩展webpack的功能。
编写loader要遵循“单一”原则，每个loader转义一种类型的文件，通过获取源文件，将其进行转义处理，最终返回处理之后的内容。
编写plugin是在运行webpack的生命周期中，监听相关事件，通过webpack提供的api改变输出结果。
bundle是打包之后的代码块
chunk是在进行模块分析的时候，代码分割出来的代码块
module是在开发过程中的单个模块
当打包之后，应用程序的目录结构不复存在，webpack通过runtime与manifest管理各个模块之间的联系与交互。
manifest保留着所有模块的详细要点（比如依赖于哪个模块）。
runtime根据manifest，查询模块标识符，实现模块的加载和逻辑解析。
浏览器具有缓存的功能，当我们更新代码时，一般会通过更新文件名使浏览器去下载新的代码，而不去使用缓存的旧代码。
为了使我们的开发和调试更加高效，webpack提出一种长缓存的方案，就是通过NameModulesPlugin插件去分离项目中经常更新的代码和不经常更新的代码（如引入的第三方库、插件等），使那些不经常更新的代码打包时文件名不变，从而提高打包效率。
1、压缩代码，删除多余的注释、简化代码等；
2、利用CDN加速；
3、删除死代码（tree shaking）
4、优化图片（压缩、雪碧图、base64）
5、路由懒加载、按需加载，提取公共代码；
6、去除sourcemap。代码分割，实现长缓存。