添加.js.map文件后控制台抛出错误，该如何解决？

嘿，这个问题我之前也碰到过！本质原因很简单：你用script-loader把.js.map文件当成可执行的JavaScript脚本加载了。.map文件是JSON格式的源映射文件，不是能直接运行的JS代码，当webpack尝试eval它的时候，JSON里的冒号就会触发语法错误，也就是你看到的Unexpected token :。

下面是具体的解决步骤：

• 先检查你的代码或webpack配置，是不是手动引入了.js.map文件。正常情况下，你只需要引入对应的.js文件就行，浏览器会自动读取JS文件末尾的//# sourceMappingURL=xxx.js.map注释，自动加载map文件，完全不需要手动引入map文件。
• 如果是你代码里写了类似import 'script-loader!./showdown.js.map'的语句，赶紧删掉这行，换成引入.js文件：import 'script-loader!./showdown.js'。
• 确认你的JS文件（比如showdown.js）末尾有正确的sourceMapping注释，如果没有的话，可以手动加上：//# sourceMappingURL=showdown.js.map，同时保证map文件和JS文件在同一个目录下。
• 要是是webpack配置的问题，检查module.rules里的script-loader规则，确保它只处理.js文件，排除map文件。比如修改规则：

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'script-loader',
      exclude: /\.map$/ // 明确排除所有.map文件
    }
  ]
}

源映射文件是用来调试的时候映射到源码的，不需要作为执行脚本引入，按照上面的步骤调整后，错误应该就消失了，同时你依然能在开发者工具里正常使用源映射功能。

内容的提问来源于stack exchange，提问作者Nahomb