有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

怎么配置Webpack 的 sourcemap(彻底搞懂 )配置原理

前端框架 炮渣日记 1个月前 (11-07) 35次浏览 已收录 0个评论 扫描二维码

SourceMap 是什么,下面通过例子来演示。

怎么配置Webpack 的 sourcemap(彻底搞懂 )配置原理

接上回的例子,修改 webpack.config.js,加上一行配置项 devtool: ‘none’ :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
 entry: {
 main: './src/index.js'
 },
 output: {
 filename: 'main.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {},
 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 new CleanWebpackPlugin(['dist'])
 ],
 mode: 'development',
 devtool: 'none'
}

然后修改 index.js 的内容:

var root = document.getElementById_1('root'); // 故意把getElementById拼写错

运行打包,然后查看 index.html 页面:

怎么配置Webpack 的 sourcemap(彻底搞懂 )配置原理

页面报错了,控制台显示错误在打包生成的 main.js 的第96行。但是这个提示结果肯定不是我们想要的,在开发阶段,我要知道错误是在源代码的哪行,而不是在打包的文件中。怎么办呢,这时候就需要用到 SourceMap 了。

把 devtool: ‘none’ 改成 devtool: ‘source-map’,再运行打包,查看结果:

怎么配置Webpack 的 sourcemap(彻底搞懂 )配置原理

这时可以到看,错误信息提示在 index.js 文件第一行出错了, 这就是我们想要的结果。

SourceMap 其实是一个映射关系,它知道 mian.js 中的第96行对应的是 index.js 中的第1行。

关于配置 ‘source-map’ 可以查看官方文档:
https://www.webpackjs.com/con…,里面有很多选项,如果不配置 devtool, 则默认就是开启了。 这里使用了 ‘source-map’ ,查看 dist 文件夹,会发现里面多了一个 main.js.map 文件,里面的内容就是映射关系。

如果把 devtool: ‘source-map’ 改为 devtool: ‘inline-source-map’,运行打包命令,再看 dist 目录就会发现 main.js.map 文件没有了,但在 main.js 文件的最下面,多出了一个很长的 base64 字符串,inline-source-map 会把映射内容以 base64 编码形式加入到打包生成的 js 文件中去。

把 devtool: ‘inline-source-map’ 改为 devtool: ‘inline-cheap-source-map’,运行打包,可以看到效果是一样的,这个 cheap 的意思是,只提示错误在源文件的哪一行就行了,不用精确到哪一行哪一列,这样做有什么好处呢,好处就是打包的速度会大大提升。

把 devtool: ‘inline-cheap-source-map’ 改为 devtool: ‘
inline-cheap-module-source-map’,加了一个 module, 是指不光是我们写的代码,包括第三方模块的代码,它都会进行错误提示。

把 devtool: ‘
inline-cheap-module-source-map’ 改为 devtool: ‘eval’, 运行打包,可以看到在 main.js 中最下面的映射内容也没有了,取而代之的是以 eval 的方式执行代码:

怎么配置Webpack 的 sourcemap(彻底搞懂 )配置原理

这种方式是速度最快的效率最高,没有生成映射内容,但是如果项目较大,他提示的信息可能会不全。

如何选择最佳配置选项呢?

如果是开发环境,即 mode: ‘development’,用 devtool: ‘
cheap-module-eval-source-map’ 比较好,

如果是生产环境,即 mode: ‘production’,用 devtool: ‘cheap-module-source-map’ 比较好。

最后在看一下官网文档的一个主意事项:

你可以直接使用
SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项,因为它有更多的选项。

切勿同时使用 devtool 选项和
SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件,所以你最终将应用两次插件。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址