【零基础学习Webpack】source-map---常用打包模式

内容来自拉勾教育《大前端就业急训营2期》

source-map

配置在devtool选项中，与mode同级

 // 打包模式
    mode: 'development',
    devtool: 'inline-nosources-source-map',
    // 入口配置
    entry: './src/index.js',

1、source-map

打包后，会生成js文件对应的.map文件，并且在js文件末尾会添加# sourceMappingURL=index.bundle.js.map

2、hidden-source-map

打包后，会生成js文件对应的.map文件，但在js文件末不会添加与之对应的.map文件

3、inline-source-map

打包后，不会生成js文件对应的.map文件，会在js文件末尾追加映射信息：可以定位到錯誤的位置。

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly93ZWJwYWNrLXN0dWR5Ly4vbm9kZV9tb2R1bGVzL19jb3JlLWpzQDMuMTguM0Bjb3JlLWpzL2ludGVybmFscy9hLWNhbGxhYmxlLmpzIiwid2VicGFjazovL3dlYnBhY2stc3R1ZHkvLi9ub2RlX21vZHVsZXMvX2NvcmUtanNAMy4xOC4zQGNvcmUtanMvaW50ZXJuYWxzL2EtY........

4、eval-source-map

打包后，不会生成js文件对应的.map文件，会在js文件中的eval函数后追加

錯誤定位信息也很詳細

5、eval-cheap-source-map

打包后，不会生成js文件对应的.map文件，会在js文件中的eval函数后追加,并且错误中不会体现响应的错误列信息。

6、nosources-source-map

可以定位错误信息，但不能查看源码信息，可以按照提示到本地源码进行查询

7、名词解释

8、如何选取合适的映射模式？

(推荐，但不绝对)，可以根据当下的开发需求选择适合自己项目的打包模式。

• 开发环境：eval-cheap-module-source-map
• 生产环境：none | nosources-source-map