Еще один способ использования Webpack 4 и разделение кода

[Golem765]

Или можно просто заюзать html плагин :)

[leschenko]

А пример можете показать как для каждой точки входа сделать отдельный html с помощью этого плагина? У меня получилась каша — все в одном файле.

[Taraflex]

github.com/jantimon/html-webpack-plugin опция chunks. В теории, если прописать там только конкретную точку входа, то зависимые чанки должны автоматом подтянуться, но сам не проверял.
Но ваше решение лучше. Спасибо!

[leschenko]

Да, действительно опция chunks делает то, что надо. Остается только распотрошить полученные html и достать оттуда <link /> и <scripts />

[dsrk_dev]

зачем? этот плагин умеет брать готовый html и добавлять туда линки

[leschenko]

У меня сайт на asp.net mvc core. Мне не надо готовые html.

[dumistoklus]

github.com/object88/webpack-file-list-plugin не подходит? собирает имена файлов и выплевывает json

[leschenko]

Не подходит. По сути это тот же манифест. К тому же он файл пишет сам, а не эмитит его средствами webpack. А значит не будет работать с webpack-dev-server.

[Arik]

webpack в целом смешной, максимально пытается сказать что он тут главный и сейчас все покажет- такой Нарцис, gulp на его уровне простой пацанчик Подай-Принеси-Сделай. И главное вроде по докам все хорошо, работает на ура и узнаешь много нового, но как только пытаешься внедрить куда, особенно где давно сидит дед-бэкенд…

[justboris]

webpack — линкер модулей, а gulp — таск-раннер, shell-скрипты на стероидах. Использование одного не мешает использованию другого

webpack в целом смешной, максимально пытается сказать что он тут главный и сейчас все покажет- такой Нарцис, gulp на его уровне простой пацанчик Подай-Принеси-Сделай

Это вы вообще откуда взяли?

[XeuRun]

Как то пытался сделать через webpack чтобы при билде получался чистый index.html который рендерится из index.twig (twigjs либа) с подключением чистых js и css файлов без всего мусора который появляется в конечном entrypoint файле, в итоге промучался недельку, доходило даже до попытки написать собственный плагин. В итоге просто за день переписал все на gulp, понял что webpack все же не для того.

[dagen]

Посмотрите examples в репозитории html-webpack-plugin. Возможно пример с jade вам подходит.

[leschenko]

Шикарно! Именно этот плагин я искал. Он делает в точности то, что мне требовалось. Не найдя его, я принялся писать свой плагин и в результате появилась эта статейка.

Webpack крут тем, что какая бы проблема не была, решение скорее всего есть. Вот только найти его иногда не получается — приходится писать статью на Хабр. :)

[uh_zuh]

Какой в итоге плагин?

А то видимо исходный комментарий был удалён.

[leschenko]

К сожалению, эта информация утеряна. Я сам буквально несколько дней назад хотел отказаться от своего "решения", но здесь эту информацию не нашел.

Кажется, это был webpack-manifest-plugin - npm (npmjs.com), но вот как его готовить я не помню.

Можно попробовать вот так: code splitting multiple vendor chunks · Issue #181 · shellscape/webpack-manifest-plugin (github.com)

Если получится - напишите коментарий. Пусть это останется в истории.

[leschenko]

Нашел.

Вот так это делается:

const WebpackAssetsManifest = require('webpack-assets-manifest');

module.exports = {
    plugins: [
        new WebpackAssetsManifest({
            entrypoints: true,
            output: 'entrypoints.json',
            transform(assets, manifest) {
                return assets[manifest.options.entrypointsKey];
            }
        })
    ]
};

[parserpro]

Огромное спасибо! Не зря комменты прочитал.

[ivansergeev]

Спасибо огромное!!!

[RomanPokrovskij]

> бандл содержит npm модули (они же vendors)

не совсем понимаю, какой «ключ» вызывает эту магию? по какому запросу искать на сайте webpack а документацию?

[leschenko]

эту магию вызывает optimization.splitChunks.chunks: «all»

[RomanPokrovskij]

точно? и не надо

cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
}

по документации так не поймешь…

[leschenko]

del

[Sartor]

Вебпак похож на какую-то сборку чёрной магии, где если сделать всё точно по примерам из мануала или плагинов — то всё работает. Чуть тебе нужно соединить два плагина или сделать что-то нестандартное — ничего не выйдет, сразу всё ломается, полотна непонятных ошибок. Ответов нигде нет. Но находится куча статей на медиуме, и др. уважаемых ресурсах, где у людей точно так же бомбит от внутренней магии вебпака и они делятся ценнейшими советами, чтобы другие не мучались. Это всё ужасно, если честно. И самое обидное то, что вебпак — лучшее, всё-таки, решение целой кучи задач. Продолжаем жрать единственный кактус :(

[parserpro]

Освоил esbuild и забыл про Webpack как про страшный сон.