Общий шаблон для нескольких точек входа в Webpack

Question

В Webpack (4) есть способы передать экспорт (ы) данного файла ввода в вспомогательный модуль, который сам по себе действует как запись? В основном это способ «обернуть» точки входа.

Теперь я знаю, что могу легко использовать CommonChunks для импорта в запись, но я пытаюсь сделать экспорт из записи для другого модуля, чтобы фактически что-то сделать в его место. Вот почему.

У меня есть приложение реагирования, для сборки которого я использую Webpack. Я портирую из стека NEXT.js, который для моих целей является источником накладных расходов. Хотя я хочу сохранить одну особенность, это помещать маршруты в папку pages/, где я export default Component на каждой странице, рендеринг выполняется автоматически. Это было бы очень хорошее поведение для проекта Webpack.

Прямо сейчас, я получаю мою основанную на каталогах множественную запись примерно так:

/* webpack.config.js */

const pages = {};

for(let route of fs.readdirSync('./pages')){
    pages[route] = path.resolve('./pages', route);
}

module.exports = {
    entry: pages,
    /* ... */
}

Работает; но мне нужно требовать и настроить ReactDOM.render для каждой записи. В одиночку это не имеет большого значения, но при переходе к HMR (горячая перезагрузка) и другим вещам это добавляет много избыточности. Это также затрудняет поддержание моего кода на уровне разработки и разработки.

То, что я хотел бы сделать, это. У меня есть один модуль в моем проекте, который выполняет фактическое отображение моих страниц, что-то вроде:

/* init.js */

const MyEntryPoint = require("?‍♂️").default;

const intoContainer = 
    document.body.appendChild(document.createElement("div"))

ReactDOM.render(MyEntryPoint, intoContainer);

с несколькими страницами ввода, похожими на

/* pages/login/index.js */

export default () => (
    <div>Welcome to the login page!</div>
)

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

Есть ли лучший способ сделать это?

Answer 1

Я действительно понял это в какой-то момент. Закончил свое собственное решение под названием
Промежуточный вход в Webpack .

Он загружает данный файл insert, указанный в IntermediateEntryPlugin.

Вы можете установить и импортировать этот плагин через NPM как webpack-intermediate-entry.

Затем он заменяет все записи этим файлом и заменяет "__webpack_entry__" import на каждый оборот.

Надеюсь, это поможет!