sourcemap 翻译

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

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 ’
        }]
    }
}