## webpack sourceMap 使用說明 >時間：2016-09-05 15:23:30 >作者：zhongxia >webpack文檔地址：http://webpack.github.io/docs/build-performance.html#sourcemaps ## 總結 >在開發環境，或者生產環境中，如果出現錯誤了，在瀏覽器中，因為代碼從被Babel從JSX變成ES5的，代碼調試起來很痛苦，因此webpack有了一個代碼映射，把轉換后的代碼映射到之前自己寫的代碼。 >英語水平有限，下面翻譯可能存在問題，請幫忙指出。 devtool可選值: - source-map 【用于生產環境】 - eval-source-map - eval-cheap-module-source-map - eval-cheap-source-map - eval 【建議開發環境用這個】 ~~~ module.exports = { devtool: 'eval'， ... } ~~~ ### **Perfect SourceMaps are slow**. ~~~ 越好的源碼映射，越慢 ~~~ ### **source-map** devtool: "`source-map`" cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. It’s something for production. >`source-map` 不能為 模塊和需要重新生成的代碼塊 緩存SourceMaps，它適用于 生產環境。 ### **eval-source-map** devtool: "`eval-source-map `" is really as good as devtool: "source-map", but can cache SourceMaps for modules. It’s much faster for rebuilds. >`eval-source-map` 和 `source-map` 差不多，但是 可以為模塊 緩存它可以更快的重建SourceMaps，它可以更快的重建SourceMaps ### **eval-cheap-module-source-map** devtool: "`eval-cheap-module-source-map`" offers SourceMaps that only maps lines (no column mappings) and are much faster. >`eval-cheap-module-source-map` 只為行（沒有列映射）提供SourceMaps 并且 速度更快（相對于 source-map, eval-source-map） ### **eval-cheap-source-map** devtool: "`eval-cheap-source-map`" is similar but doesn’t generate SourceMaps for modules (i.e., jsx to js mappings). >`eval-cheap-source-map` 和 `eval-cheap-module-source-map` 相似，但是不為模塊 生成 SourceMaps（eg：jsx 到 js 的映射） ### **eval** devtool: "`eval`" has the best performance, but it only maps to compiled source code per module. In many cases this is good enough. (Hint: combine it with output.pathinfo: true.) >`eval`有最好的性能，但是它只映射到每個模塊編譯源代碼，在更多情況下是足夠用的(提示：與 `output.pathinfo:true` 結合使用) **相關知識** [output.pathinfo](https://webpack.github.io/docs/configuration.html#output-pathinfo) Include comments with information about the modules. ~~~ require(/* ./test */23) ~~~ Do not use this in production. >Default: false ## The UglifyJsPlugin use SourceMaps to map errors to source code. And SourceMaps are slow. As you should only use this in production, this is fine. If your production build is really slow (or doesn’t finish at all) you can disable it with new UglifyJsPlugin({ sourceMap: false }). > UglifyJsPlugin會讓 SourceMaps 映射到源碼出現錯誤，速度變慢。所以把**UglifyJsPlugin用于生產環境**，這是很好的。 如果你生產環境構建很慢(或者玩不成)，可以用 `new UglifyJsPlugin({ sourceMap: false }).` 來禁用sourceMap。