webpack + babel loaderソースマップ参照空ファイル

webpack + babel loaderを使用してバンドルするes6プロジェクトがあります。私はdevtoolsを開くと、下に 'webpack：//'と私のすべてのソース（es6）が見えます。？ブレークポイントがヒットしないと関数参照は、ファイル名」に私を指示し、次のコンテンツがあるwebpack + babel loaderソースマップ参照空ファイル

d41d：

問題がある

undefined 


/** WEBPACK FOOTER ** 
** 
**/

私は、ドキュメントのスクリプトからドリルダウンした場合に？私は私のwebpack.config.js

同様d41dファイルを取得する私のバンドル内の機能：

module.exports = { 

    debug: true, 
    devtool: 'cheap-module-eval-source-map', 
    entry: "entry.js", 
    output: { 
     path: "C:/html5/", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'], 
        plugins: ['transform-object-assign'], 
        sourceMaps: ['inline'] 
       } 
      } 
     ] 
    } 
};

とpackage.jsonの一部、それが役立つかもしれない場合：事前に

"devDependencies": { 
    "ava": "^0.16.0", 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-transform-object-assign": "^6.8.0", 
    "babel-preset-es2015": "^6.13.2", 
    "cheerio": "^0.22.0", 
    "chokidar-cli": "^1.2.0", 
    "eslint": "^3.3.1", 
    "html-to-js": "0.0.1", 
    "jsdoc": "^3.4.0", 
    "jsdom": "^9.4.2", 
    "minami": "^1.1.1", 
    "obfuscator": "^0.5.4", 
    "sinon": "^1.17.5", 
    "uglify-js": "^2.7.3", 
    "webpack": "^1.13.2", 
    "yargs": "^5.0.0" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.0" 
    }

感謝。また、これはちょうど今日、私に起こって始め

出典

2016-08-29 Gal Ziv

Babelは異なるソースマップ形式hereを導入し、Webpackは正しく処理しませんでした。
フィックスはthis PRでマージされ、はWebpack 1.14.0でリリースされました。

出典

2016-12-07 12:55:16

は魅力的な感謝のように動作します。またreduxのために:) –

、

は、私は問題の根本が何であるかわからないんだけど、sourceMapにcheap-module-eval-source-mapからdevtoolを切り替えると、時間があるために問題を修正しました。

出典

2016-08-30 22:01:56

私はwebpackのサイトで言及されているすべての可能なdevtoolsオプションを使用しました。すべて同じ結果が得られました –

あなたはこれを考えましたが、稼働中のサーバーがwebpack設定の変更を受け入れていないため、変更するたびにdevserver（またはwebpackを実行している）を再起動していることを確認してください。 –

私はdevserverを使用しません。毎回手動で実行します。しかし、頭のおかげで、 –

このスレッドにはかなり遅れています。しかし、これは将来の読者を助けるだろうと思っています。私はちょうどES6 + Babel + Webpackの組み合わせを練習していて、BabelとWebpackを使ってES6/ES2015の開発環境を設定する方法について説明したこのビデオを見に来ました。

https://www.youtube.com/watch?v=wy3Pou3Vo04

私はそのビデオで述べたとおりにしようと、問題なく私のために働きました。場合誰もがソースコード/映像に問題がされている場合：

Package.json

 
{ 
    ... 
    "devDependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0", 
    "webpack": "^1.13.2" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.0" 
    } 
}

Message.js

 
export default class Message { 
    show(){ 
     alert("Hello world!"); 
    } 
}

app.js

 
import msg from './Message.js' 
import $ from 'jquery' 

$(function(){ 
    $("#ShowBtn").on("click", function(){ 
     var o = new msg(); 
     o.show(); 
    }); 
});

私は、適切なソースマップについては、上記のソースコードに追加

index.htmを

<html> 
 
<head> 
 
\t <title></title> 
 
\t <script type="text/javascript" src="build/app.all.js"></script> 
 
</head> 
 
<body> 
 
\t <button id="ShowBtn">Show</button> 
 
</body> 
 
</html>

webpack.config.js

 
var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: ['./src/app.js'], 
    output: { 
     path: './build', 
     filename: 'app.all.js' 
    }, 
    module:{ 
     loaders:[{ 
      test: /\.js$/, 
      include: path.resolve(__dirname, "src"), 
      loader: 'babel-loader', 
      query:{ 
       presets: ['es2015'] 
      } 
     }] 
    }, 
    watch: true //optional 
};

一つだけの事はありますwebpack.config.jsの "devtool： 'source-map'"（もちろん、そのビデオには言及されていません）。

出典

2016-09-09 18:02:49 user203687

遅すぎることはありません。私はしばらくそれを残しましたが、仕事に戻ったときに日曜日にそれをテストします。その結果を更新してください。ありがとう！ –

webpack + babel loaderソースマップ参照空ファイル

答えて

関連する問題