概念：Webpack 是一种用于构建 JavaScript 应用程序的静态模块打包器，加载应用中的所有资源文件（图片、CSS、字体文件等），并将其合并打包成浏览器兼容的 Web 资源文件。
功能：
- 模块的打包：通过打包整合不同的模块文件保证各模块之间的引用和执行
- 代码编译：通过
loader可以将不同格式文件如.less/.vue/.jsx转译为浏览器可以执行的文件 - 扩展功能：通过社区丰富的
plugin可以实现多种强大的功能，例如:代码分割、代码混淆、代码压缩、按需加载.....等
1.常见的loader及其作用？
-babel-loader：将es6转译为es5
-image-webpack-loader： 加载并压缩图片资源
-awesome-typescirpt-loader: 将typescript转换为javaScript 并且性能由于ts-loader
-less-loader: 将SCSS/LESS代码转换为CSS
-css-loader: 加载CSS代码 支持模块化、压缩、文件导入等功能特性
-style-loader: 把CSS代码注入到js中，通过DOM 操作去加载CSS代码
使用类似于 less 或者 scss 等预处理器的时候，通常需要多个 loader 的配合使用如test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']
-cache-loader: 可以在一些开销较大的Loader之前添加可以将结果缓存到磁盘中，提高构建的效率
2.常见的plugin及作用
-web-webpack-plugin：为单页面应用输出HTML 性能优于html-webpack-plugin
-clean-webpack-plugin: 每次打包时删除上次打包的产物, 保证打包目录下的文件都是最新的
-webpack-merge： 用来合并公共配置文件,常用（例如分别配置webpack.common.config.js/ webpack.dev.config.js/webpack.production.config.js并将其合并）
-terser-webpack-plugin：压缩ES6的代码（tree-shaking）
-uglifyjs-webpack-plugin: 压缩js代码
-mini-css-extract-plugin: 将CSS提取为独立文件，支持按需加载
-css-minimize-webpack-plugin：压缩CSS代码
-copy-webpack-plugin： 在构建的时候，复制静态资源到打包目录。
-compression-webpack-plugin: 生产环境采用gzip压缩JS和CSS
-webpack-dashboard: 可以更友好地展示打包相关信息
3.有没有用过好用的工具/plugin
-splitChunkPlugin：用于代码分割
-webpack-merge: 提取公共配置，用于分别编写不同环境的配置文件（ `` ）
-HotModuleReplacementPlugin:支持模块热替换
-ignore-plugin: 忽略指定文件，可以加快构建速度
-speed-measure-webpack-plugin: 分析出Webpack打包过程中的Loader和Plugin的耗时，用于性能分析
-webpack-dashboard: webpack-dashboard 是一个命令行可视化工具，能够在编译过程中实时展示编译进度、模块分布、产物信息等相关信息，性能分析时很有用。
4.loader和plugin有啥区别？
Loader：
Loader本质上是一个函数，负责代码的转译，即对接收到的内容进行转换后将转换后的结果返回 配置Loader通过在 modules.rules中以数组的形式配置
Plugin：
Plugin本质上是一个带有apply(compiler)的函数，基于tapable这个事件流框架来监听webpack构建/打包过程中发布的hooks来通过自定义的逻辑和功能来改变输出结果。 Plugin通过plugins 以数组的形式配置
5.如何保证众多Loader按照想要的顺序执行？
可以通过enforce来强制控制Loader的执行顺序 （pre 表示在所有正常的loader执行之前执行，post则表示在之后执行）
总结：
Loader主要负责将代码转译为webpack 可以处理的JavaScript代码，而 Plugin 更多的是负责通过接入webpack 构建过程来影响构建过程以及产物的输出，Loader的职责相对比较单一简单，而Plugin更为丰富多样
