核心概念
# 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