代码映射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>
-