web-dev-qa-db-ja.com

Webpack 4-ソースマップ

この記事 webpack 4：モードと最適化 は、modeがdevelopmentに設定されている場合、devtoolがevalに設定されていることを示唆しているようです。

ソースマップの生成をトリガーすると予想していましたが、developmentまたはproductionモードで webpack-4-quickstart を実行すると、ソースマップは生成されません。

Webpack 4でソースマップを生成するにはどうすればよいですか？

webpackwebpack-4
15
kimsagro

あなたが期待しているのは、（bundle.js.map 'のようなソースマップを含む抽出ファイルですが、evalタイプはそうではありません別のファイルを生成します：

eval-各モジュールはeval（）および// @ sourceURLで実行されます。これは非常に高速です。主な欠点は、元のコードの代わりにトランスコードされたコードにマップされるため、行番号が正しく表示されないことです（ローダーからのソースマップなし）。

ただし、次のようにdevtoolプロパティを手動で構成することでいつでも実行できます。

devtool: 'source-map'

ソースマップをファイルに抽出します。 ソースマップの種類について説明します コストと利点。

編集：

実際に 問題がある これに関連するPRがgithubにあります。現在、UglifyJSプラグインはsourceMap: falseプロダクションモードであっても、devtoolが設定されていても、ソースマップを抽出してファイルを分離することはできません。

21
Tomasz Mularczyk

最も簡単なセットアップは、devtool: 'sourcemaps' 従来通り。

module.exports = {
  devtool: 'source-map',
  ...
};

しかし、これはdevelopmentまたはproductionモードの両方のソースマップを生成します。

2
Csaba