对webpack的理解
webpack是一个静态模块打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，然后将这些模块打包成一个或多个bundle。 webpack将应用中所用的JS脚本分析使用到的依赖并打包在一起，并且可以实现JS，css的压缩。
Webpack中loader的作用/ loader是什么？
在webpack中，只认识JS和JSON，所以loader相当于翻译官，对其他类型的资源进行预处理，最终变为JS代码。
常见的less loader
- less-loader
- Css-loader
- Style-loader
- ts-loader
Plugin有什么用？是什么？
plugin是额外插件，拓展webpack自身的功能，比如打包优化，代码压缩 plugin加载后，在webpack构建的某个特定的时间节点就会触发plugin定义的功能
常见的plugin？
- Html-webpack-plugin 处理html资源，默认创建一个空的html资源，自动引入打包输出所有的资源
- min-css-extract-plugin 打包过后的css在js文件里，该插件可以把css单独抽出来
- clean-webpack-plugin 每次打包，会自动清除上一次的打包文件
webpack loader和plugin的区别？
loader只运行在编译阶段，而plugin在整个周期都可能出现
loader不需要引用，下载使用即可，plugin需要引用
tree-shaking是什么？
tree-shaking是一种基于ES Module规范的Dead Code Elimination 技术打包，在打包过程中检测没有被引用到的模块并进行标记，删除没有引用过的模块，提高构建速度，减少程序运行时间
使用tree-shaking要注意什么？
- 默认mode = production 在生产环境开启
- 需要用ES6的模块化开发
- 尽量不要写带有副作用的代码，如立即执行函数，函数中使用外部变量等
如何使用webpack优化前端性能
- 代码压缩
- 使用DLL技术进行分包：将node_module进行单独打包，对于不常调用的JS库可以减少请求
- 使用路由懒加载
Webpack如何配置压缩代码？压缩了什么？
如何配置？
- 在optimization配置项中配置插件为压缩器进行压缩
- 在plugin使用插件进行压缩
JS压缩：利用terser-webpack-plugin
CSS压缩：optimize-css-assets-webpack-plugin 插件
压缩删除了console、注释、空格、换行、没有使用的css代码等
如何提高webpack构建速度？
-
缩小处理范围:合理利用这两个属性exclude：不需要处理的文件 和 include：需要处理的文件
-
HMR(Hot Module Replacement) 模块热替换只重新构建发生变化的模块 – 开发环境中
-
babel缓存 第二次构建时，会读取之前的缓存，只重新构建变化的文件
-
使用Dll进行分包 --> 分包方便按需加载
-
多进程打包 thread-loader,将其放在费时的loader之前
