前言:在写这篇文章之前,我必须要吐槽一下webpack了。特别喜欢更新版本,更新就算了,文档还跟不上。文档真的让人迷惑了,大爷的。
背景:由于我正在写sourceMap反向定位源码的功能,所以最近需要使用到webpack的source-map配置。因为公司webpack的版本有2.0和4.0的,所以在做sourceMap配置的时候,真的是花费了很大的气力。无力吐槽,我们看正文吧
===============================================================================
= 开源项目:前端监控系统 --- 只需要简单几步,就可以搭建一套属于自己的前端监控系统,快试试吧。 =
===============================================================================
SourceMap是一种映射关系。当项目运行后,如果出现错误,我们可以利用sourceMap反向定位到源码。
const path = require('path'); module.exports = { devtool: 'none', // SourceMap的模式(见下表) entry: './src/index.js', // 入口文件 output: { filename: 'bundle.js', // 文件名 path: path.resolve(__dirname, 'dist') // 文件夹 } }
SourceMap不同模式的特点(见下表)
模式 | 解释 |
---|---|
eval | 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL . |
source-map | 生成一个SourceMap文件(编译速度最慢) |
hidden-source-map | 和 source-map 一样,但不会在 bundle 末尾追加注释. |
inline-source-map | 生成一个 DataUrl 形式的 SourceMap 文件. |
eval-source-map | 每个module会通过eval()来执行,并且生成一个DataUrl形式的SourceMap. |
cheap-source-map | 生成一个没有列信息(column-mappings)的SourceMaps文件,不包含loader的 sourcemap(譬如 babel 的 sourcemap) |
cheap-module-source-map | 生成一个没有列信息(column-mappings)的SourceMaps文件,同时 loader 的 sourcemap 也被简化为只包含对应行的。 |
1. webpack2.0+; webpack配置 devtool: "source-map" 无效。
sourceMap正确配置如下:
const buildConfig = { mode: "production", output: { path: distPath, filename: "./js/[name].[hash].min.js", publicPath: "./" }, plugins: [ new UglifyJSPlugin({ // 1. 这个配置必须 sourceMap: true }), ].concat(baseConfig.htmlArray), devtool: "source-map" // 2. 这个配置必须 }
2. webpack4.0+; webpack配置 devtool: "source-map" 生成的map代码没有 sourcesContent,没有sourcesContent的结果是你只能定位要压缩代码的位置,无法定位到源码的位置
sourceMap 正确配置如下:
const buildConfig = { mode: "production", output: { path: distPath, filename: "./js/[name].[hash].min.js", publicPath: "./" }, optimization: { // 1. 这个配置必须 minimize: false }, plugins: [ ].concat(baseConfig.htmlArray), devtool: "source-map" // 2. 这个配置必须 }