Как загрузить исходные файлы библиотеки с помощью webpack

Я создаю два проекта с помощью webpack; один - это библиотека для другого.

Можно ли использовать исходные карты из моего проекта библиотеки при создании моего проекта оболочки? Я хотел бы отлаживать свой библиотечный код из моего интерфейса оболочки.

Моя сборка работает правильно в том, что библиотека встроена. Единственная проблема - исходные файлы. 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. Это действительно был правильный путь, хотя сначала он не работал у меня.

В конце концов я понял, что мне нужно включить source-map-loader для webpack как в "my-lib" , так и "my-ui". Без source-map-loader в конфигурации "my-lib" webpack, source-map-loader внутри ошибок "my-ui" (с печальным сообщением), потому что он не может найти исходные карты для транзитивных зависимостей "my-lib" . По-видимому, исходные карты настолько хороши, что 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/}
    ]
}

Ответ 2

Вы должны иметь возможность использовать любые параметры исходной карты eval, которые предоставляет Webpack.

Действительно, это всего лишь установка правильной опции devtool в webpack.config.js для проекта my-lib.

devtool: 'eval',

eval и eval-source-maps должны работать.

Смотрите документацию по исходной карте Webpack для различных опций.