webpack

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")}