Webpack5 第五节

代码映射Source Map定位问题

Source Map：源代码和构建后代码的映射。为了当项目运行出现问题或者报错时，通过控制台能够快速定位到具体出错的代码

配置

devtool:"source-map"

推荐配置

devtool:"eval-cheap-module-source-map"

• eval 具有最好的性能，但并不能帮助你转译代码。
• cheap 配置的map 质量会稍微差一点（保留行报错，没有列报错），但是不影响问题定位，还可以提高性能
• module 包含第三方模块的报错

深入理解Tree Shaking

• Tree Shaking（摇树）

• • 描述移除 JavaScript 上下文中的未引用代码

• • • 函数return后的代码
    • 只声明未使用的代码
    • 只引入未使用的代码

• 注意

• • Tree-shaking只对ES Module规范的模块起作用
  • 针对静态结构进行分析，只有import和export是静态的导入和导出。而commonjs有动态导入和导出的功能，无法进行静态分析。

• 与Source Map有兼容问题

• • devtool 只能设置以下四种

devtool:source-map | inline-source-map | hidden-source-map | nosources-source-map

• • eval 模式是将 js 输出为字符串不是 ES Modules规范，导致Tree Shaking失效

• 使用

• • 生产模式

• • • 自动开启

• • 开发模式

• • • usedExports

const TerserPlugin=require('terser-webpack-plugin')
optimization:{// 标记未使用的代码usedExports:true,// 删除已经标记未使用的代码minimize:true,minimizer:[new TerserPlugin()]
}

• • • sideEffects

• 副作用

• • 引入一个模块，调用了模块中的函数，或者修改当前模块、全局的数据，就有副作用

• • • 修改全局的变量
    • 在原型上扩展方法
    • css的引入

• 开启副作用

optimization:{// 开启副作用标识sideEffects:true,
}

• 标识代码是否有副作用

// package.json
"sideEffects":false (告诉webpack所有代码都没有副作用)
"sideEffects":true (告诉webpack所有代码都有副作用)
"sideEffects":['xxx.js','*.less']（告诉webpack哪些有副作用，不移除）

webpack中的缓存

• babel缓存

• • 特点

• • • 第二次构建时，会读取之前的缓存

• • 配置

use:[options:{cacheDirectory:true}
]

• 文件资源缓存

• • 配置webpack哈希值

• • • hash
    • chunkhash
    • contenthash

webpack中的模块解析和排除依赖打包

• 模块解析

• • 配置

// webpack.config.js
resolve:{alias:{// 指定路径的别名'@':resolve('src')},// 自动解析模块的后缀名extensions: ['.js', '.json', '.less'],
}

• 排除依赖打包

• • 配置

// webpack.config.js
externals:{'jquery':'jQuery'
}

// index.
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>