sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用

1. 什么是sourceMap

sourceMap 是一个信息文件，维护着代码转换编译前后的映射关系;

2. devtool : 选项控制是否生成，以及如何生成 source map source Map对应的模式

1）inline

2) cheap

3）module

4) eval

5) source-map

3-21 加载 Source Map · 深入浅出 Webpack

然后根据上述几种进行组合验证 devtool 名称时，我们期望使用某种模式，注意不要混淆 devtool 字符串的顺序，模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.

见图：

如果是eval / inline 模式不会生成单独.map 文件，会以dataUrl 的形式存在打包文件后的结尾

source-map 会生成单独的.map 文件

3 . 浏览器中的表现形式

如果加载的js 的文件结尾有#sourceMap（eval) 或者 #sourceMapUrl（source-map)(比如如果是hidden-source-map 这种打包出来的js 文件就没有，所以不会自动关联)，可以右键选择添加源映射

解析到#sourceMap 或者 #sourceMapUrl 的时候会自动去关联到（hidden-xxx 的除外）

4. 使用了压缩插件 uglifyjs-webpack-plugin或者terser-webpack-plugin 如果想使用source-map 如果再设置下sourceMap: true，因为压缩插件里面默认 sourceMap: false

chainWebpack(config) {config.devtool('hidden-source-map').end()config.when(process.env.NODE_ENV === 'production',config => {config.optimization.minimizer('js').use(new uglifyjs({sourceMap: trueuglifyOptions: {warnings: false,compress: {drop_console: true,drop_debugger: true,pure_funcs: ['console.log', 'console.warn']}}}))})}

5. 生产环境下一般使用source-map 或者 hidden-source-map 模式 , 具体可以参考官网推荐, 生成的map 文件不要和业务代码部署到一起，防止被别人看到，可以单独进行部署，实现私有化，只能特定网络下访问，比如部署到公司内网服务器, 此时就要修改js 文件结尾的#sourceMapUrl 链接地址

//# sourceMappingURL=app.fea6fcf0.js.map 修改为

//# sourceMappingURL=http: xxxxx:xxxx/app.fea6fcf0.js.map

6. 插件：实现了对 source map 生成内容进行更细粒度的控制

| webpack 中文文档

你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。

比如我们要单独部署.map 文件需要修改map链接的地址, 可以设置这个时候publicPath或者 append 就可以使用插件：

const webpack = require('webpack')
module.exports = {productionSourceMap: true,chainWebpack(config) {config.plugin('SourceMapDevToolPlugin').use(webpack.SourceMapDevToolPlugin).tap(args => {return [{filename: '[file].map',publicPath: 'https://exmaple.com/',
// append: "\n//# sourceMappingURL=http://example.com/sourcemap/[url]",moduleFilenameTemplate: 'source-map'}]})}
}

上述代码打包之后发现 js文件结尾会有两个#sourceMapUrl

{return l&&h.REQUIRED&&d(e)&&!n(e,c)&&p(e),e},h=e.exports={REQUIRED:!1,fastKey:f,getWeakData:m,onFreeze:b};i[c]=!0}}]);
//# sourceMappingURL=https://exmaple.com/static/js/chunk-540c250b.99bc351b.js.map
//# sourceMappingURL=chunk-540c250b.99bc351b.js.map

这个就说明 vue-cli4(目前我使用的版本）中使用了 devtool ，devtool 和SourceMapDevToolPlugin 插件同时存在，所以导致了两个sourceMap指向, SourceMapDevToolPlugin插件是用来替代devtool,看源码会发现 cli中有多处会根据 productionSourceMap这个布尔值来设置是否使用 devtool ；需要注意的是vue-cli4默认的js 压缩插件是 terser-webpack-plugin, 如果想生成sourceMap 压缩插件这个属性必须设置true

两处源码如下：

可能你会想直接设置productionSourceMap为false，这个时候就会导致 terser-webpack-plugin 插件sourceMap 也会为false, map文件就生成不了, 我们的目标是生成map文件，同时去掉自带的devtool 保留SourceMapDevToolPlugin插件

所以第一种就是设置productionSourceMap为true, 同时在chainWebpack手动设置devtool：false, 覆盖自带的devtool,

const webpack = require('webpack')
module.exports = {productionSourceMap: true,chainWebpack(config) {config.devtool(false).end()config.plugin('SourceMapDevToolPlugin').use(webpack.SourceMapDevToolPlugin).tap(args => {return [{filename: '[file].map',publicPath: 'https://exmaple.com/',moduleFilenameTemplate: 'source-map'}]})}
}

第二种就是设置productionSourceMap：false 同时设置压缩插件的sourceMap: true (但是这种不能保证其他插件需不需要设置 ) 所以最好还是选择第一种吧

const webpack = require('webpack')
const terser = require('terser-webpack-plugin')
module.exports = {productionSourceMap: false,chainWebpack(config) {config.plugin('SourceMapDevToolPlugin').use(webpack.SourceMapDevToolPlugin).tap(args => {return [{filename: '[file].map',publicPath: 'https://exmaple.com/',moduleFilenameTemplate: 'source-map'}]})
// vue-cli4 这种方式生效config.optimization.minimizer('terser').tap((args) => {args[0].sourceMap = truereturn args})}
}

同样css 也有sourceMap, vue-cli3 默认是关闭的

css: {

sourceMap: true

参考：

Devtool | webpack 中文文档

何为SourceMap？讲讲SourceMap食用姿势 - 知乎

https://www.jianshu.com/p/721b0d26e1ea

Webpack devtool source map « Cheng's Blog

Source Maps

深入浅出的webpack构建工具---devTool中SourceMap模式详解(四) - 龙恩0707 - 博客园

Webpack 实战系列一：正确使用 Sourcemap-51CTO.COM

webpack - vue-cli sourcemap私有化部署配置_个人文章 - SegmentFault 思否

sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用相关推荐

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）
文章目录 1. 重点提炼 2. 配置环境 3. Plugins(插件) 3.1 HtmlWebpackPlugin 3.1.1 example01 3.1.1.1 example01-1 3.1.1. ...
一文了解source-map
一文了解source-map 一文了解source-map 背景举例 source-map eval eval-source-map inline-source-map cheap-source-m ...
何为SourceMap？
做好事不留名的 sourcemap 当我们在开发代码的时候,遇到错误的时候可以在控制台定位到具体的问题,就像这样:问题在于,由于打包动作会将我们的原始代码进行编译.压缩,最后在产物中早已没有我们的原始 ...
Sourcemap 配置详解
前言之前在脚手架工具内整合将sourcemap上传sentry能力的时候,考虑bundle分割对.map文件关联的限制:比如TerserWebpackPlugin(JS压缩)只对 devtool 选 ...
webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap
很多东西容易忘记,做个简单笔记 1.webpack loader 加载顺序从后到前例子 ['style-loader', 'css-loader','sass-loader'] 先sass最后st ...
【总结】1263- 弄懂 SourceMap，前端开发提效 100%
一.什么是 Source Map 通俗的来说, Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系.关于 Sour ...
weex devtool集成到Android项目
我们使用weex开发Android项目时,会遇到难以真机调试的问题,开发起来会很头疼,难以跟踪bug.weex提供了一个工具来调试weex开发的代码,weex devtool与weex的一个app应用 ...
webpack：devtool配置中的source map
webpack:devtool配置中的source map 一.功能作用二.配置文件三.source map格式 (1)source-map (2)inline-source-map (3)hid ...
弄懂 SourceMap，前端开发提效 100%
一.什么是 Source Map 通俗的来说, Source Map 就是一个信息文件,里面存储了代码打包转换后的位置信息,实质是一个 json 描述文件,维护了打包前后的代码映射关系.关于 Sour ...

sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用

sourceMap: devtool 模式以及SourceMapDevToolPlugin的使用相关推荐

最新文章

热门文章