webpackを使用してライブラリのソースマップを読み込む方法は？

Question

私はwebpackで2つのプロジェクトを構築しています。 1つはもう一方のライブラリです。

ラッパープロジェクトをビルドするときに、ライブラリプロジェクトからソースマップを使用することはできますか？ラッパーUIからライブラリコードをデバッグする機能が必要です。

私のビルドは、ライブラリが組み込まれているという点で正しく機能します。唯一の問題はソースマップです。ソースマップが利用できないので、ブラウザデバッガに表示されるJavaScriptは醜いです。 webpack.config.jsから

+-- my-ui/ 
    +-- dist/ 
     +-- my-ui.js 
     +-- my-ui.js.map 
    +-- node_modules/ 
     +-- my-lib/ 
      +-- dist/ 
       +-- bundle.js 
       +-- bundle.js.map 

スニペット：私のプロジェクト構造の

スニペットsource-map-loaderの先端のための@BinaryMuseに私はようやく私の問題を考え出し

module.exports = { 
    entry: './src/js/main.jsx', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'my-ui.js', 
     library: 'my-ui', 
     libraryTarget: 'umd' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')} 
     ] 
    }, 
    plugins: [ 
     new Clean('dist'), 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      inject: true 
     }) 
    ] 
}; 

Answer 1

は...

感謝。これは確かに私が最初に働いていないが、行く正しい方法だった。

「my-lib」と「my-ui」のwebpackにsource-map-loaderを有効にする必要があることがわかりました。 source-map-loaderを "my-lib" webpack configに指定しないと、 "my-ui"エラーの内側にあるsource-map-loaderは "my-lib"の推移的な依存関係のソースマップを見つけることができないため警告メッセージが表示されます。どうやら、ソースマップはとても良いので、source-map-loaderは依存関係ツリーのすべての側面を覗き見ることができます。

また、react-hot-loaderと組み合わせてsource-map-loaderを使用して問題が発生しました。参照：react-hot-loaderにはソースマップが含まれていません。 source-map-loaderがそれらを見つけようとすると（すべてをスキャンしているだけなので）、すべてをスキャンできず、中止されます。

最終的には、私はsource-map-loaderをよりフォールトトレラントにしたいと思いますが、正しく設定するとうまくいきます！

devtool: 'source-map', 
module: { 
    preLoaders: [ 
     {test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/}, 
     {test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/} 
    ], 
    loaders: [ 
     {test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/} 
    ] 
} 

Answer 2

あなたはWebPACKのが提供するのevalソースマップオプションのいずれかを使用することができるはずです。

実際にはmy-libプロジェクトのwebpack.config.jsには、右のdevtoolオプションが設定されています。

devtool: 'eval', 

evalとeval-source-maps仕事の両方必要があります。

さまざまなオプションについては、Webpack source map documentationを参照してください。