web-dev-qa-db-fra.com

Comment charger des cartes sources de bibliothèque à l'aide de webpack?

Je construis deux projets avec webpack; l'un est une bibliothèque pour l'autre.

Est-il possible de consommer les sourcemaps de mon projet de bibliothèque lors de la construction de mon projet wrapper? Je voudrais pouvoir déboguer le code de ma bibliothèque à partir de l'interface utilisateur de mon wrapper.

Ma build fonctionne correctement dans la mesure où la bibliothèque est intégrée. Le seul problème est les sourcemaps. Le JavaScript que je vois dans le débogueur du navigateur est uglifié, car les sourcemaps ne sont pas disponibles.

Extrait de la structure de mon projet:

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

Extrait de 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
        })
    ]
};
javascriptreactjswebpack
35
Jeff Fairley

J'ai finalement compris mon problème ...

Merci à @BinaryMuse pour l'astuce sur source-map-loader . C'était en effet la bonne voie à suivre, même si cela ne fonctionnait pas pour moi au départ.

Ce que j'ai finalement réalisé, c'est que je dois activer le source-map-loader pour webpack dans "my-lib" et "my-ui". Sans pour autant source-map-loader dans la configuration du webpack "my-lib", le source-map-loader à l'intérieur des erreurs "my-ui" (avec un message d'avertissement malheureusement) car il ne peut pas localiser les cartes sources pour les dépendances transitives de "my-lib". Apparemment, les cartes sources sont si bonnes que source-map-loader est capable de jeter un œil à tous les aspects de l'arbre de dépendance.

Notez également que j'ai rencontré un problème en utilisant source-map-loader en conjonction avec react-hot-loader. Voir, react-hot-loader n'inclut pas les cartes sources. Quand source-map-loader essaie de les trouver (car il ne fait que tout scanner), il ne peut pas et abandonne tout.

En fin de compte, je voudrais source-map-loader pour être plus tolérant aux pannes, mais lorsqu'il est correctement configuré, cela fonctionne!

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/}
    ]
}
20
Jeff Fairley

Vous devriez être en mesure d'utiliser n'importe laquelle des options de carte source eval fournies par Webpack.

Vraiment, cela revient à définir la bonne option devtool dans votre webpack.config.js pour le my-lib projet.

devtool: 'eval',

eval et eval-source-maps devrait fonctionner.

Voir documentation de la carte source Webpack pour les différentes options.

1
Noah Solomon