sourceMap
-
source-map
-
cheap-source-map
// 编译转化后的代码，并且只定位到首行， 生成.map -
inline-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 = falsemodule.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 }, )