devtool / source-map の設定 [Webpack]

devtool

参考：

webpack で使える SourceMap 一覧まとめ | t-hiroyoshi-blog

webpack で source-map を表示できるようにする – Qiita

webpack.config.js の読み方、書き方 | dackdive’s blog

Devtool | Webpack [Official]

devtool – configuration · webpack/docs Wiki – GitHub

Source Maps | SurviveJS

Quick guide to webpack source map options | Scott Logic Blog

web pack source map not working for some devtool options. · Issue #5491 · webpack/webpack – GitHub

How do I generate sourcemaps when using babel and webpack? – Stack Overflow

ソースマップの種類

• (none)
• eval
• cheap-eval-source-map
• cheap-module-eval-source-map
• eval-source-map
• cheap-source-map
• cheap-module-source-map
• inline-cheap-source-map
• inline-cheap-module-source-map
• source-map
• inline-source-map
• hidden-source-map
• nosources-source-map

参考：

Devtool | Webpack [Official]

webpack/examples/source-map/README.md at v4.26.1 · webpack/webpack – GitHub

cheap-module-source-map

参考：

cheap-module-source-map doesn’t generate sourcesContent · Issue #4176 · webpack/webpack – GitHub

Syntax

参考：

sourceMappingURL and sourceURL syntax changed | Google Developers

sourceMapFilename

参考：

output.sourceMapFilename | Webpack [Official]

output.sourceMapFilename – configuration · webpack/docs Wiki – GitHub

devtoolModuleFilenameTemplate

参考：

source map に指定される domain や path を変更する – Qiita

output.devtoolModuleFilenameTemplate | Webpack [Official]

output.devtoolModuleFilenameTemplate – configuration · webpack/docs Wiki – GitHub

Webpack’s sourcemap paths are not real paths · Issue #559 · webpack/webpack – GitHub

Document `webpack://` & make sourcemaps have relative paths to original files · Issue #3603 · webpack/webpack – GitHub

SourceMapDevToolPlugin

参考：

SourceMapDevToolPlugin | Webpack [Official]

webpack/SourceMapDevToolPlugin.js at v4.26.1 · webpack/webpack – GitHub

EvalSourceMapDevToolPlugin

参考：

EvalSourceMapDevToolPlugin | Webpack [Official]

webpack/EvalSourceMapDevToolPlugin.js at v4.26.1 · webpack/webpack – GitHub

webpack/EvalDevToolModuleTemplatePlugin.js at v4.26.1 · webpack/webpack – GitHub

webpack/ModuleFilenameHelpers.js at v4.26.1 · webpack/webpack – GitHub

ビルド・パフォーマンス

参考：

Performance of webpack-dev-server with source maps · Issue #168 · webpack/webpack – GitHub

devtoolModuleFilenameTemplate

参考：

Breaks absolute file paths for source map filename templates · Issue #480 · babel/babel-loader – GitHub

webpack://

参考：

Document `webpack://` & make sourcemaps have relative paths to original files · Issue #3603 · webpack/webpack – GitHub

How to resolve file path from a webpack:/// URI · Issue #2395 · webpack/webpack – GitHub

sourcemap collision when building as a library · Issue #5767 · webpack/webpack – GitHub

SourceMap mapping webpack to wrong file location in VSCode Debug · Issue #2453 · angular/angular-cli – GitHub

webpack-internal://

参考：

SourceMap don’t link to an src file but to webpack-internal:///[LINE_NUMBER] · Issue #5186 · webpack/webpack – GitHub

Chrome でソースマップを使う

参考：

Source maps with newer Chrome DevTools’ workspaces · Issue #6400 · webpack/webpack – GitHub

Source Maps don’t work on Chrome · Issue #2145 · webpack/webpack – GitHub

Webpack Hot Module Replacement (HMR) doesn’t update sourcemap · Issue #2478 · webpack/webpack – GitHub

Webpack hot module replacement (HMR) sourcemaps not updated / new code not visible in dev tools – Stack Overflow

style タグ内のソースマップが Safari で効かない

参考：

Does source-maps in style tags work? – Stack Overflow

Sass / SCSS

参考：

Using Source Maps to Debug Sass in Chrome | SitePoint

TypeScript

参考：

TypeScript で React を書く | maesblog

Getting started with Webpack: Source Maps | Bendyworks

The joy that is Source Maps (with Vue.js and TypeScript) | Peter’s

source-map-loader

rules: [
  // ...
  {
    test: /\.js$/,
    use: ['source-map-loader'],
    enforce: 'pre'
  },
  // ...
]

参考：

webpack-contrib/source-map-loader: extract sourceMappingURL comments from modules and offer it to webpack – GitHub

The joy that is Source Maps (with Vue.js and TypeScript) | Peter’s

How to load library source maps using webpack? – Stack Overflow

Where does source-map-loader fit into TypeScript compilation with Webpack? – Stack Overflow

Windows でパスが壊れる

参考：

css-loader 周りの SourceMap 関連バグと戦う | エフアンダーバー