sourcemap总结

sourcemap在线上压缩文件调试中很重要，在此总结如下：

1. 开启sourcemap

(1). 浏览器要开启source-map支持
(2). 压缩文件底部要有source-map的URL，压缩要开启source-map
(3). .map文件要放在服务器，source-map URL指向的位置

2. sourcemap文件加载特点

(1). map文件只是在chrome开发者工具开启时候，才会去加载
(2). map文件的加载在Network面板中看不到
(3). source-map只会加载.map文件，不会加载压缩前的js或less/sass文件

3. sourcemap webpack打包设置

webpack3.x

devtool: 'source-map',
plugins:[
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        sourceMap: true
    })
]

webpack4.x

devtool: 'source-map',
optimization: {
    minimize: true
}

webpack3和4中，devtool只有source-map才能完全映射文件，cheap-source-map，cheap-module-source-map
这两种模式都不能完整的映射文件

4. sourcemap在chrome中的查看方式

More tools -> Developer Resources

添加sourcemap