Как дебажить код ReactJS в ConsoleDevTools

После долгих мучений с parcel, я не смог создать возможность увидеть исходных, код (не минимизированный) в консоли хрома для дебага. Поэтому я воспользовался другим сборщиком - webpack.

Настраиваем конфиг webpack в директории

Исходники js-a были за пределами настроенной директории веб сервера, возможно это повлияло на то, что я не смог настроить отображение исходного кода в консоил, используя сборщик parcel.

Конфиг webpack (webpack.config.js) был следующим:

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, "/../public/js"),
        filename: 'app.min.js',
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                use: 'babel-loader',
                exclude: [
                    /node_modules/
                ]
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],

    },
    resolve:
        {
            alias: {
                ui: path.resolve(__dirname, './src/ui'),
                capsules: path.resolve(__dirname, './src/modules/capsules'),
                exporter: path.resolve(__dirname, './src/modules/attribute-exporter'),
                'price-parser': path.resolve(__dirname, './src/modules/price-parser')
            },
        }
};

Super-powers are granted randomly so please submit an issue if you're not happy with yours.

Настраиваем конфиг package.json:

Запускаем команду

Если в parcel алиасы компонентов указываются в package.json, то их нужно переписать в webpack.config.js

NextProcessing domain events

Last updated

Was this helpful?