sourcemap是一种映射方法,能将压缩整合过的代码还原到未构建前的状态,
The anatomy of a source map
{
version : 3, //source map基于的版本
file: "out.js",//经过压缩简化等操作产生的生产代码
sourceRoot : "",//添加文件结构
sources: ["foo.js", "bar.js"],//源文件,编译前的文件
names: ["src", "maps", "are", "fun"],//代码中包含的变量方法的名称
mappings: "AAgBC,SAAQ,CAAEA"//最新的map属性,节省空间
}
TODO
source-map-loader
某些从 Npm 安装的第 三 方模块是采用 ES6 或者 TypeScript 编写的,它们在发 布时会同 时带上编译出来的 JavaScript 文件和对应的 Source Map 文件,以方便我们在使用 它们出问 题时进行调试 。 在默认情 况下, Webpack 是不会加载这些附加的 Source Map 文件的, Webpack 只会在 转换的过程 中生成 Source Map。为了让 Webpack 加载这些附加的 Source Map 文件,我们需 要安装 source-map-loader ( https://github.com/webpack-contrib/source幽map-loader)。使用方法 如下:
module . exports = {
module : {
rules :[{
test: /\.js$/,
//只加载我们关心的目录下的 Source Map,以提升构建速度
include: [path.resolve(root, ’ node modules/some-components /’)],
use: [’ source-map-loader ’],
//要将 source-map-loader 的执行顺序放到最前面,如果在 source-map
loader 之前有 Loader 转换了该 JavaScript 文件,就会导致 Source Map 映射错误
enforce : ’ pre ’
}]
}
}