Какая нужна конфигурация Webpack, чтобы собирать библиотеку?

У меня есть библиотека на NPM. Когда она мне потребовалась на NPM, мне было достаточно всего двух файлов - index.js, readme.md. Сейчас я добавил много всего (тесты, сборки, babel и т. д.

Мне нужно, чтобы webpack собирал в папке dist 2 файла: index.esm.js (для import lib from 'lib-name') и index.browser.js для подключения через CDN. А сорсы лежат в /lib/.

Я уже потратил очень много времени на гугление, чтение доков вебпака и поиска аналогичных библиотек, чтобы посмотреть как это сделали они.

Но, похоже, я очень плохо гуглю. Подскажите что почитать, может, набросайте примерный конфиг.

Вот мой конфиг сейчас: webpack.config.js

const path = require('path');

module.exports = {
 entry: {
  esm: './lib/index.esm.js',
  browser: './lib/index.browser.js'
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'index.[name].js',
  library: 'LibName',
  libraryTarget: 'commonjs',
 }
}

/lib/index.esm.js

import { libName } from './core.js';

export default libName;

/lib/index.browser.js

import { libName } from './core.js';

window.libName = libName;

Сейчас я пробую устанавливать пакет локально. При подключении браузерного билда в браузере действительно появляется новая переменная с библиотекой, но я вижу билд и вижу там экспорты. Они не нужны в билде для браузера. Моё решение скорее костыль.

А при import libName from 'lib-name' я получаю объект:

{'libName': Module { default: /* lib exported class */}}

А нужен уже lib exported class

Я уже не знаю куда копать. Самое глупое, что из-за этих проблем со сборкой откладывается релиз важного обновления. Подскажите, пожалуйста. Спасибо!


Ответы (0 шт):