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

Question

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

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

main.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 были "final" т.е. они должны работать в целевой системе без дальнейшей постобработки (например, снова запустить WebPack, чтобы превратить их в один пакет).

Answer 1

Вы можете сделать это с помощью этого типа конфигурации:

module.exports = [{
  resolve: {
    modules: ["."],
  },
  entry: {
    "foo": "foo.js",
  },
  output: {
    path: `${__dirname}/build`,
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
    library: "foo",
    // libraryTarget: "umd",
  }
},{
  resolve: {
    modules: ["."],
  },
  entry: {
    "main": "main.js",
  },
  externals: {
    "foo": "foo",
  },
  output: {
    path: `${__dirname}/build`,
    filename: "[name].js",
    sourceMapFilename: "[name].js.map",
  }
}];

Это даст два пакета в подкаталоге build/.Ключ для получения main для использования foo:

1. Запись "foo": "foo" в externals для создания пакета main.Всякий раз, когда main запрашивает foo, он ищет его извне в «модуле» с именем foo.Я поместил «модуль» в кавычки, потому что когда у вас есть пакеты в формате UMD, и вы загружаете их с script, там нет системы модулей.Вместо поиска фактического модуля код будет искать глобальную переменную с именем foo.

2. Пакет foo экспортирует себя в глобальное пространство в виде переменной foo, что позволяет использовать его main.