sourceMap
source-map
cheap-source-map
// 编译转化后的代码,并且只定位到首行, 生成.mapinline-cheap-source-map
开发环境
--config-- | --描述-- | --map-- | |
---|---|---|---|
eval-cheap-module-source-map | 折中的选择, 编译后的代码,定位不准, 没有生成列映射(column mapping),只是映射行数,loader source map 会被简化为每行一个映射(mapping)。 | 不单独生成.map文件 | 不推荐 |
eval | 具有高性能的开发版本的推荐选择,会映射到转换后的代码,而不是映射到原始代码, 不能正确的显示行数 | 生成.map | |
eval-source-map | 最高质量的sourcemap | 不生成js.map, 生成css.map |
生产环境
--config-- | --描述-- | --map-- | |
---|---|---|---|
devtool:null | 最高性能 | 生成.map文件 | 推荐 |
source-map | 高质量的sourcemap | 生成.map文件 | 推荐 |
hidden-source-map | 隐藏map,手动添加 | 生成.map | |
nosources-source-map | 映射堆栈跟踪, 不暴露源代码 | 生成.map(体积较小) |
- hidden-source-map
- 用来发送错误报告
- 手动开启source-map: 复制当前编译后文件名:chrome中当前文件头部右键=> copy filename =>文件中 右键=>add source map => 输入
=>添加${filename}.map
customize-cra
不生成sourcemap
process.env.GENERATE_SOURCEMAP = false
module.exports = override( ... process.env.GENERATE_SOURCEMAP = false // 大大缩小包体积,但是无法在线查看源码 ),
配置示例
const { override, addWebpackAlias, useEslintRc, } = require("customize-cra"); module.exports = override( useEslintRc(".eslintrc"), addWebpackAlias({ "@": require("path").resolve(__dirname, "src"), react: require("path").resolve(__dirname, "node_modules/react"), }), (config)=>{ config.devtool = "eval-source-map" //配置sourcemap return config }, )