私は webpack を使用して 2 つのプロジェクトを構築しています。1 つはもう 1 つのためのライブラリです。
ラッパー プロジェクトをビルドするときに、ライブラリ プロジェクトのソースマップを使用することは可能ですか? ラッパー UI からライブラリ コードをデバッグする機能が欲しいです。
ライブラリが組み込まれているため、ビルドは正常に動作します。唯一の問題はソースマップです。ソースマップが利用できないため、ブラウザ デバッガーに表示される JavaScript が醜く見えます。
私のプロジェクト構造の抜粋:
+-- my-ui/
+-- dist/
+-- my-ui.js
+-- my-ui.js.map
+-- node_modules/
+-- my-lib/
+-- dist/
+-- bundle.js
+-- bundle.js.map
抜粋webpack.config.js:
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
})
]
};
ベストアンサー1
ようやく問題が分かりました...
@BinaryMuseさん、ヒントをありがとうソースマップローダーこれは確かに正しいやり方でしたが、最初はうまくいきませんでした。
source-map-loader最終的に私が気づいたのは、「my-lib」と「my-lib」の両方でwebpackを有効にする必要があるということでした。そして「my-ui」。source-map-loader「my-lib」の webpack 構成がないと、source-map-loader「my-lib」の推移的依存関係のソース マップが見つからないため、「my-ui」の内部でエラーが発生します (残念ながら警告メッセージが表示されます)。どうやら、ソース マップは非常に優れているため、source-map-loader依存関係ツリーのすべての側面を覗くことができます。
source-map-loaderまた、を と組み合わせて使用すると問題が発生しましたreact-hot-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/}
]
}