1. webpack核心概念

• 入口(Entry)
• 出口(Output)
• 加载器(Loader)
• 插件(Plugins)
• 模式(Mode)
• 模块(Module)
• 依赖图(Dependency Graph)

2. 加载器(Loader)

• 模块代码转化器，使Webpack 有能力去处理除了 JS、JSON 以外的其他类型的文件
  • webpack默认只能识别js，想要处理其它类型的文件，需要对应的loader
  • 命名规则：xxx-loader(css-loader | html-loader | file-loader)
  • 常用loader (opens new window)

3. 插件(Plugins)

• 实现loader之外的其他功能
  • plugin是webpack的支柱，用来实现丰富的功能
  • 命名规则：xxx-webpack-plugin
  • 常用plugins (opens new window)
• loader 和plugins 本质都是npm包 <!-- - copy-webpack-plugin
• clean-webpack-plugin -->

4. 模式(Mode)

• development(自动优化打包速度，添加一些调试过程中的辅助)
• production（自动优化打包结果）
• none （运行最原始的包，不做任何额外的处理）

5. 模块(Module) (opens new window)

• 一切皆模块
  • js模块
  • 一段css
  • 一张图片
  • ...

5. resolve

• 配置模块解析规则
• alias: 配置模块加载的路径别名
• extensions: 引入路径时，可以省略哪些后缀
  • extensions: ['js', 'json'] 默认只识别js，json
• modules: 指定模块加载位置
  • [resolve(__dirname: './node_modules'), 'node_modules]

6. externals

• 排除打包依赖项（防止对某个依赖项进行打包）
• 比如依赖的第三方库

7. 代码分离

如果把所有代码都打包在一起，可能最终打包的代码非常大，而从影响加载时间 而且很多代码初始是不需要的，因此我们可以根据代码的紧急程序，将代码分割，按需加载。

多入口打包

• entry: 对象形式
• output：不能写成固定形式 [name].bundle.js
• htmlWebpackPlugin: 不同页面加载不同的bundle

代码抽离

• optimization.splitChunks.chunks: 'all'

动态导入

• 懒加载
  • 默认不加载，事件触发后才加载
  • webpackChunkName: '加载名称'
• 预加载
  • 先等待其他资源加载，浏览器空闲时，再加载
  • webpackPrefetch: true
  • 缺点：在移动端有兼容性问题

// import 启动懒加载
// webpackChunkName: 'desc' 指定懒加载的文件名称
// webpackPrefetch: true 启动预加载
import(/*webpackChunkName: 'desc', webpackPrefetch: true*/'./wp').then((desc) => {
    console.log(desc, 'desc')
    alert(desc);
})

8. 缓存

• Babel
  • cacheDirectory: true（第二次构建时，会读取之前的缓存）
• 文件资源缓存
  • 如果代码在缓存期内，代码更新后看不到实时效果
  • 方案：将代码文件名称，设置为哈希名称，名称发生变化，就加载最新的内容
• webpack哈希值
  • hash
  • [chunkHash](不同chunk的hash值不同- 同一次打包可能生成不同的chunk)
  • contentHash

9. 什么是Source Map

• 是一种源代码与构建代码之间的映射技术
• 通过.map文件，将构建之后的代码与源代码之间建立映射关系

为什么需要使用 Source Map

• 问题：构建后的代码，出了问题之后不好定位
• 方案：有了Source Map后，可以快速定位问题代码

如何生成Source Map

• devtool: '映射模式'
• 映射模式（devtool的值）
  • 不同映射模式的报错定位效果和打包执行速度不同
  • webpack4中，共13中不同的映射模式
  • webpack5中，共26种不同的映射模式
• webpack5 的命名更加严格
  • cheap-module-eval-source-map => eval->cheap->module->source->map
  • ^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
• 如何获取合适的映射模式（个人建议哈）
  • 开发环境：eval-cheap-module-source-map
  • 生产环境：none｜ nosources-source-map