webpack
webpack是将资源（js、css、图片文本类）整合的工具，需要依赖loader来处理这些文件/合并js依赖
webpack常用的loader
loader：处理文件用的，可能返回新的文件、url、base64之类的。
css类：引入函数的处理呀，样式编写的处理呀。
- css-loader：处理css引入函数@import/url()，和js的import/export一样
- style-loader：将css-loader的转化的js对象放到创建出来的style标签，然后注入dom中。
- postcss-loader：css处理loader，里面有很多插件，比如autoprefix：自动给css中的一些属性添加兼容，比如一些浏览器的前缀，-webkit-...
- less-loader：将less语法转化成css语法
文件资源类：本地文件的处理呀，比如压缩、转化成base64、url改成互利网可访问的url呀。
- raw-loader：可以将文件作为字符串引入，比如txt文件
- file-loader：将reuqire/url中的文件资源url添加一个前缀弄成可互联网访问的资源，前缀通过配置给，比如1.png，然后给一个
http://www.baidu.com的配置，那么loader会返回http://www.baidu.com/1.png， - url-loader：作用和file-loader类似，但是它可以决定小于多少容量的文件，转化成base64丢进js里，还是作为静态资源打包。
js类：
- babel-loader：用于处理js源代码，将源代码转化成新的源代码，比如将语法转换成es5的语法，这一过程需要将源代码解析成ast文件，然后遍历替换源代码，生成新的源代码。
- ts-loader：将ts语法转化成js语法
框架类：
- vue-loader：对.vue文件的处理，比如template会转换成render函数，style会在添加唯一的属性名（data-v-hash值）后正常的交给其他loader处理，
webpack常用的plugin
plugin：在webpack打包过程的几个节点做处理，比如打包优化、注入全局变量
- copy-webpack-plugin：将单个文件/目录复制到打包后的目录中（比如项目中未用到的资源，却想把他们也丢到asset文件夹中）
- html-webpack-plugin：创建一个html文件，然后将打包后的js文件引入
- happy-webpack-plugin：多进程打包
- mini-css-extract-plugin：为每个js文件的css样式都创建一个css文件，统一放到一个文件夹里（比如element里就是）
- purifycss-webpack：将css中多余的部分删除
- optimize-css-assets-webpack-plugin：压缩css文件
- clean-webpack-plugin：在生产打包时，生成的bundle文件名都会有独一的hash，再次打包的话，上一次的bundle文件不会删除，所以就需要这个插件
- uglifyjs-webpack-plugin：压缩js代码
- webpack-bundle-analyzer：可视化界面展示各个bundle（各个js模块）模块的大小
- speed-measure-webpack-plugin：能看到打包时，各个loader的耗时
webpack自带的功能
- treeshaking：将模块引用树中的没有被引用的节点给删除
- alias：别名，比如代码的引入我们写(utils/)，在webpack配置中可以将utils替换成完整的文件地址，然后自动添加index.js后缀
plugin
- webpack.DefinePlugin：打包过程中的全局变量，比如是开发环境还是打包环境
- webpack.hotmoduleReplacementplugin：热模块更新
- webpack.ProvidePlugin：在代码编写时提供全局模块，比如我们可以给lodash起名为_，代码的任何地方就可以直接使用，不需要引用。
- webpack.NoEmitOnErrorsPlugin：打包过程直接跳过报错
webpack打包优化手段
背景：打包过程：解析编译->整合资源，而解析编译过程解析（babel-loader）、转换（css-loader、style-loader等）、压缩模块（uglifyjs-webpack-plugin等）
检测手段：
- speed-measure-webpack-plugin：能看到打包过程中各个loader的耗时
- webpack-bundle-analyzer：能看到各个bundle（模块）的大小
解析、压缩速度和包的大小来考虑优化
loader：
- babel-loader：可以开启缓存，加速二次打包过程
- thread-loader：多线程处理各个模块
- 一些图片的loader可以压缩
plugin：
- uglify-webpack-plugin：可以开启多进程压缩模块
高版本的webpack和node就有很多自带的优化手段
