source map

137 阅读1分钟

eval: 使用 eval 包裹模块代码 source map:产生.map 文件 cheap:不包含列信息 inline:将 .map 作为 DataURI 嵌入,不单独生成 .map 文件 moudle:包含 loader 的 sourcemap

image.png

devtool: 'eval'// 打包后的文件 var __webpack_modules__={366:()=>{eval("console.log(1);\n\n//# sourceURL=webpack://webpack_study/./src/search/index.js?")}},有 eval 包裹,并且后面有文件路径
devtool: 'source-map'// 打包后的文件
console.log(1);
//# sourceMappingURL=search.js.map
devtool: 'inline-source-map'// 打包后的文件,体积变大
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLmpzIiwibWFwcGluZ3MiOiJBQUFBQSxRQUFRQyxJQUFJIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vd2VicGFja19zdHVkeS8uL3NyYy9zZWFyY2gvaW5kZXguanMiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coMSk7Il0sIm5hbWVzIjpbImNvbnNvbGUiLCJsb2ciXSwic291cmNlUm9vdCI6IiJ9

如果在 webpack.dev.js 中使用, devtool: 'source-map',debugger 后为源文件,未压缩的文件