Как с помощью WebPack создать готовые к использованию «разделенные» пакеты, в которых один зависит от другого?

Мой вопрос очень близок к другие, ответы на которые I полагать по-прежнему требуют еще одного шага WebPack, которого я хочу избежать. Но вот сначала история:

У меня есть модуль Node (назовем его libfoo), который предоставляет некоторые функции и требует некоторых сторонних модулей, и скрипт небольшойmain.js, который обеспечивает основную точку входа и требует libfoo:

основной.js:

const foo = require('foo');
function main() {
    foo.bar();
}
main();

Теперь я хочу превратить libfoo и main.js в результаты исполняемый файл браузера с помощью WebPack. И я хочу, чтобы libfoo (который довольно большой) статически находился в целевых системах, в то время как main.js был очень маленьким и быстро менялся (просто представьте тестовый сценарий, где libfoo — это модуль, который я хочу протестировать, а main.js содержит меняющиеся фрагменты кода)

Мне удалось создать два пакета — назовем их foo.browser.js и main.browser.js — в которых содержать весь необходимый функционал, но у меня не получается заставить main.browser.js корректно импортировать foo.browser.js.

Я еще не очень разбираюсь в WebPack - и до сих пор не мог понять, что происходит. Мой текущий подход выглядит так: я создаю foo.browser.js, выполнив следующую команду:

webpack --output-filename foo.browser.js foo.js

И у меня есть webpack.config.js вместо main.js, который выглядит так:

module.exports = {
  externals: {'foo': 'foo'},  // don't know what I'm doing here - added `commonjs` and `root` randomly
}

Я превращаю main.js в main.browser.js очень похожей командой: webpack --output-filename main.browser.js main.js

Теперь я пытаюсь использовать эти оба файла в файле с именем foo.html, содержащем эти строки:

<script src = "dist/foo.browser.js"></script>
<script src = "dist/main.browser.js"></script>

Но когда я теперь открываю foo.html в браузере, я получаю

external "foo":1 Uncaught ReferenceError: foo is not defined
    at Object.foo (external "foo":1)
    at __webpack_require__ (bootstrap:19)  
    at Object../main.js (main.js:3)  
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

Я немного повозился, но (боюсь, только случайно), но безуспешно.

В моем сценарии есть одно ограничение, которое может отличаться от других (рабочих) примеров, которые я нашел: мне нужно, чтобы foo.browser.js и main.browser.js были "окончательный", т.е. они должны работать в целевой системе без дополнительной постобработки (например, снова запустить WebPack, чтобы превратить их в единый пакет).