一 基础
1、Webpack 常规配置项有哪些？
- mode: "development"|"production"|"none" 打包模式
- entry: 入口文件
- ouput：fileName,path 输出文件名和路径目录
- module：webpack 默认支持处理 JS 与 JSON 文件，其他类型借助loader。将不认识的文件，转换成可认识的文件
- plugins:可以贯穿 Webpack 打包的生命周期，执行不同的任务
- devtool：为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能
- devServer 配置热替换
- optimization：配置构建性能
2、常用 Loader 有哪些？如何配置？
常用loader:
- style-loader(将处理好的css,通过style标签加入到html中)、css-loader（识别.css),postcss-loader(css兼容)，sass-loader，less-loader。
- file-loader：解决图片引入问题，并将图片 copy 到指定目录，默认为 dist
- url-loader：解依赖 file-loader，当图片小于 limit 值的时候，会将图片转为 base64 编码，大于 limit 值的时候依然是使用 file-loader 进行拷贝；
- image-loader：压缩图片
- babel-loader：解决js兼容性，如es6,es-next。解决臃肿，可配置babelrc.js
3、常用插件（Plugin）有哪些？如何配置？
- html-webpack-plugin：将打包后的js或css文件自动引入到html文件中；
- clean-webpack-plugin：自动清空上次打包的文件
常量引入require,CJS plugins：进行配置， new *Plugin(params)
4、Babel 的如何配置？Babel 插件如何使用？
- babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5
- @babel/core Babel 编译的核心包
- @babel/preset-env Babel 编译的预设，可以理解为 Babel 插件的超集，其他常见预设@babel/preset-flow @babel/preset-react @babel/preset-typescript
两种方式：1、配置babel-loader 2、通过预设文件babelrc.js
5、devtool熟悉配置？关于source-map
- 本地开发： eval-cheap-module-source-map
- 生产环境：none
6、解决缓存问题？
- hash ：任何一个文件改动，整个项目的构建 hash 值都会改变；
- chunkhash：文件的改动只会影响其所在 chunk 的 hash 值；
- contenthash：每个文件都有单独的 hash 值，文件的改动只会影响自身的 hash 值；
Webpack进阶
一 优化构建速度
1、构建费时分析
speed-measure-webpack-plugin
2、resolve配置别名 alias
3、externals
排除依赖库的打包，如：jQuery；大大节省打包构建的时间。
4、缩小范围
loader合理运用exclude，include
5、noParse
不需要解析依赖的第三方大型类库等，可以通过这个字段进行配置，以提高构建速度 使用 noParse 进行忽略的模块文件中不会解析 import、require 等语法
6、IgnorePlugin
将插件中的非中文语言排除掉
7、多进程配置
使用thread-loader(happypack webpack5已经弃用)
8、利用缓存
- babel 在转译 js 过程中时间开销比价大，将 babel-loader 的执行结果缓存起来，重新打包的时候，直接读取缓存
- 缓存位置： node_modules/.cache/babel-loader
二 优化构建结果
1、构建结果分析
webpack-bundle-analyzer
2、压缩 CSS
OptimizeCssAssetsPlugin
3、压缩 JS
terser-webpack-plugin
4、清除无用的 CSS
purgecss-webpack-plugin
5、Tree-shaking
- Tree-shaking 作用是剔除没有使用的代码，以降低包的体积
- webpack 默认支持，需要在 .bablerc 里面设置 model：false，即可在生产环境下默认开启
6、Scope Hoisting
Scope Hoisting 即作用域提升，原理是将多个模块放在同一个作用域下，并重命名防止命名冲突，通过这种方式可以减少函数声明和内存开销。
- webpack 默认支持，在生产环境下默认开启
- 只支持 es6 代码
三 优化运行时体验
1、入口点分割
配置多个打包入口，多页打包
2、splitChunks 分包配置
optimization.splitChunks 是基于 SplitChunksPlugin 插件实现的 webpack 将根据以下条件自动拆分 chunks：
- 新的 chunk 可以被共享，或者模块来自于 node_modules 文件夹
- 新的 chunk 体积大于 20kb（在进行 min+gz 之前的体积）
- 当按需加载 chunks 时，并行请求的最大数量小于或等于 30
- 当加载初始化页面时，并发请求的最大数量小于或等于 30
3、代码懒加载
import('./')引入js代码后then处理， 和Vue路由懒加载有异曲同工之妙。
4、prefetch和preload配置
参考总结知识点。
