sourcemap總結

看風景就發表於2018-09-23

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
這兩種模式都不能完整的對映檔案

 

 

參考：https://segmentfault.com/a/1190000007544398

相關文章