webpack是一个现代javascript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系表图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
四个核心概念：
入口(entry),输出(output),loader,插件(plugins)
webpack打包原理：把一切都视为模块，不管是css,js,image还是html都可以相互引用，通过定义entry.js对所有依赖的文件进行追踪，将各个模块通过loader和plugins处理，然后打包在一起
基本功能：
1.代码转换：将typescript编译成javascript,scss编译成css
2.文件优化：压缩javascript,css,html代码，压缩合并图片
3.代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码使其异步加载
4.模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
为什么需要webpack
可以使js代码体积更小，加载更快，可以编译高级的语言和语法(ts,es6,scss)
webpack构建流程
1.初始化参数
2.开始编译
3.确定入口
4.编译模块
5.完成模块编译
6.输出资源
7.输出完成
配置单页面和多页面
单页面是webpack的标准模式，直接在entry中指定单页面应用的入口即可，多页面使用webpack的autoWebPlugins来完成
loader的作用
webpack默认只能打包js文件，配置里的module.rules数组配置了一组规则，告诉webpack在遇到哪些文件时使用哪些loader去加载和转换打包成js
常用的loader
css-loader读取合并css文件
style-loader把css内容注入到js中
sass-loader解析saas文件
postcss-loader自动添加浏览器兼容前缀
url-loader将文件转换为base64 URI
vue-loader处理vue文件
plugin的作用
用来扩展webpack功能，通过在构建流程中注入钩子实现
bundle,chunk和module
bundle是由webpack打包出来的文件，chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块，module是开发中的单个模块
常见的plugins
HtmlWebpackPlugin自动在打包结束后生成的html文件，并在其中引入bundle.js
CleanWebpackPlugin打包完成后自动删除上次打包的文件
ExtractTextPlugin用于将css,less打包成一个公共的文件
sourceMap
将打包后的文件映射到源代码，用于定位报错位置
webpack多入口文件
entry:{home:resolve(__dirname,"src/home/index.js"),about:resolve(__dirname,"src/about/index.js")}
