Комментарии 26
У нас есть несколько точек входа: app1.ts, app2.ts, app3.ts и куча модулей. Часть их них из npm, часть свои.
При сборке с опцией optimization.splitChunks.chunks = 'all' получаем огромное количество чанков.
Внимание вопрос: как мне узнать какие из чанков надо добавлять на страницу app1.html, какие на страницу app2.html и app3.html соответственно? Интересующая информация есть в output'е самого webpack'а, но она мне нужна в момент формирования тела страницы сервером (.net). А где ее взять? Может есть какой плагин, который сохранит нужный список чанков (js+css) для каждой точки входа?
У меня не грузились. Но хорошо если так должно быть, значит это у меня что-то не то в конфиге.
Тогда задам вопрос по другому: Значит ли это что указав в теге script только точку входа, все остальное загрузится само?
Все таки не грузятся. Массив deferredModules заполняется и сам никогда не читается. Базовый код webpackBootstrap не содержит в себе кода для подгрузки deferredModules.
Если не прав — ткните пальцем. Буду только рад.
Как оказалось не имеет значения в какой последовательности подгружать эти модули. Как только последний будет загружен, будет выполнен код точки входа.
Следующий код, вставленный в конец страницы, загружает все необходимое (почему это делаю я, а не webpack?)
<script type="text/javascript">
let modules = window["webpackJsonp"] || [];
for (let module of modules) {
let [, , dependencies] = module;
for (let dependency of dependencies) {
for (let t = 2; t < dependency.length; t++) {
const script = document.createElement("script");
script.src = "/public/" + dependency[t] + ".js";
document.head.appendChild(script);
}
}
}
</script>
Остается не закрытый вопрос с CSS. Если воспользоваться extract-text-webpack-plugin (который все еще в стадии beta для webpack4), то не ясно как его грузить. Тем более что для CSS порядок загрузки важен.
Css должны быть загружены до того, как загрузился js. В противном случае возможна ситуация, когда при открытии страницы вы видите некоторое время кашу.
А от gulp мы ушли, т.к. он стал мешать.
webpack-dev-server делает hot reload `link rel=«stylesheet»`?
Да. Очень хитрая. Для webpack'а css это модуль (для него все есть модуль) в котором могут быть ссылки на другие модули (картинки, шрифты). Эти же модули можно использовать в ts/js.
Например, можно писать так:
div.picture{
background-image: src('./images/picture.jpg');
}
и так:
import picture from "./images/picture.jpg";
document.createElement("img").src = picture;
Webpack поймет что это (picture.jpg) один и тот же модуль. Магия может быть применена и к картинке в том числе. Например, файл может быть заменен base64, если он очень маленький. И это будет прозрачно для js и css.
проблемам посвещен вся вот эта записись и блог habr.com/post/423693. вы их решили — наверное молодцы. Но вы же их и создали (так что те кто на это всё посмотрят и не пойдут — тоже наверное молодцы).
Он умеет выдавать json файл с нужными маппингами.
В процессе сборки webpack пишет в консоль:
Entrypoint site-page-view = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js.map?751fd19d1df6f81e67a2 site-page-view.js?be8a2a44c217161efcfc site-page-view.js.map?be8a2a44c217161efcfc
Entrypoint site-post-view = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js.map?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js?57e14dc4e77f560ad7c3 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js.map?57e14dc4e77f560ad7c3 vendors~admin-posts~profile-posts~site-common~site-post-view.js?3f714864320cc42bc538 vendors~admin-posts~profile-posts~site-common~site-post-view.js.map?3f714864320cc42bc538 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?2245624565e3fff297f0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?2245624565e3fff297f0 admin-posts~site-post-view.js?da420a76849dabea6ce6 admin-posts~site-post-view.css?da420a76849dabea6ce6 admin-posts~site-post-view.js.map?da420a76849dabea6ce6 admin-posts~site-post-view.css.map?da420a76849dabea6ce6 site-post-view.js?77547b7ea939e0f5340c site-post-view.js.map?77547b7ea939e0f5340c
Entrypoint site-common = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?41bdadb1b1aef7fb7442 vendors~admin-posts~profile-posts~site-common~site-post-view.js?3f714864320cc42bc538 vendors~admin-posts~profile-posts~site-common~site-post-view.js.map?3f714864320cc42bc538 vendors~site-common.js?9faf27b3baae39f343e8 vendors~site-common.js.map?9faf27b3baae39f343e8 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css.map?1de9d2f3dd37c79fa4d0 site-common.js?7989aa18b26d9f337922 site-common.css?7989aa18b26d9f337922 site-common.js.map?7989aa18b26d9f337922 site-common.css.map?7989aa18b26d9f337922
Entrypoint profile-manage-authenticator = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 profile-manage-authenticator.js?5681b00d8f196819264e profile-manage-authenticator.js.map?5681b00d8f196819264e
Entrypoint profile-filestorage = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js.map?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?c129b4d28fd029014b5d admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?2245624565e3fff297f0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?2245624565e3fff297f0 profile-filestorage.js?25c836f2869fc1274fa0 profile-filestorage.css?25c836f2869fc1274fa0 profile-filestorage.js.map?25c836f2869fc1274fa0 profile-filestorage.css.map?25c836f2869fc1274fa0
Entrypoint profile-posts = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js.map?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js?57e14dc4e77f560ad7c3 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js.map?57e14dc4e77f560ad7c3 vendors~admin-posts~profile-posts~site-common~site-post-view.js?3f714864320cc42bc538 vendors~admin-posts~profile-posts~site-common~site-post-view.js.map?3f714864320cc42bc538 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?2245624565e3fff297f0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?2245624565e3fff297f0 admin-pages~admin-posts~profile-posts.js?8f61e4a5e7732c12614d admin-pages~admin-posts~profile-posts.js.map?8f61e4a5e7732c12614d profile-posts.js?50cea853c3913a6c9592 profile-posts.css?50cea853c3913a6c9592 profile-posts.js.map?50cea853c3913a6c9592 profile-posts.css.map?50cea853c3913a6c9592
Entrypoint admin-pages = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js.map?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js?57e14dc4e77f560ad7c3 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js.map?57e14dc4e77f560ad7c3 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?2245624565e3fff297f0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?2245624565e3fff297f0 admin-pages~admin-posts~profile-posts.js?8f61e4a5e7732c12614d admin-pages~admin-posts~profile-posts.js.map?8f61e4a5e7732c12614d admin-pages.js?9fed5a72a0b2256c01c9 admin-pages.css?9fed5a72a0b2256c01c9 admin-pages.js.map?9fed5a72a0b2256c01c9 admin-pages.css.map?9fed5a72a0b2256c01c9
Entrypoint admin-posts = runtime.js?f9cd204313fcc36935c6 runtime.js.map?f9cd204313fcc36935c6 vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-filestorage~profile-manage-authenticator~profile-posts~site-~3a451633.js.map?a94efb6d35554e8d159d vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-manage-authenticator~profile-posts~site-common~site-custompa~cf03b557.js.map?e3d572d8ec6a9d2d8786 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-page-view~site-post-view.js.map?751fd19d1df6f81e67a2 vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?c129b4d28fd029014b5d vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?41bdadb1b1aef7fb7442 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js?57e14dc4e77f560ad7c3 vendors~admin-pages~admin-posts~profile-posts~site-post-view.js.map?57e14dc4e77f560ad7c3 vendors~admin-posts~profile-posts~site-common~site-post-view.js?3f714864320cc42bc538 vendors~admin-posts~profile-posts~site-common~site-post-view.js.map?3f714864320cc42bc538 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.js.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-posts~site-common~site-post-view.css.map?1de9d2f3dd37c79fa4d0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js?2245624565e3fff297f0 admin-pages~admin-posts~profile-filestorage~profile-posts~site-post-view.js.map?2245624565e3fff297f0 admin-pages~admin-posts~profile-posts.js?8f61e4a5e7732c12614d admin-pages~admin-posts~profile-posts.js.map?8f61e4a5e7732c12614d admin-posts~site-post-view.js?da420a76849dabea6ce6 admin-posts~site-post-view.css?da420a76849dabea6ce6 admin-posts~site-post-view.js.map?da420a76849dabea6ce6 admin-posts~site-post-view.css.map?da420a76849dabea6ce6 admin-posts.js?07ddd1170568a8892fe6 admin-posts.css?07ddd1170568a8892fe6 admin-posts.js.map?07ddd1170568a8892fe6 admin-posts.css.map?07ddd1170568a8892fe6
Здесь для каждой точки входа набор необходимых файлов. Но я понятия не имею как этот выхлоп сохранить куда-то. assets-webpack-plugin может по имени файла сказать как он будет выглядеть с хешем и где он лежит, но мне надо не 1 файл, а список для каждой точки входа.
А рассуждения о том как часто Алиса заходит на сайт не учитывают размер кеша в браузере. В firefox он 512 Мб, а в Хроме динамический, но прямо сейчас у меня по умолчанию установлено в 320 Мб.
И если Алиса заходит на другие сайты в интернете, то получается что в день она весь свой кеш полностью обновит.
в оригинале «Dammit I forgot to mention CSS» — нахальная отмазка халтурщика — хотя и понятно что вопрос сложный.
Во-первых, так надо или нет css по трубе sass/postcss прогонять через webpack и зачем? Кто что решил? Во-вторых, ну и как его чанками (вендор, не вендор) создавать?
stackoverflow.com/questions/52202194/webpack-4-splitchunks-generating-multiple-css/52376383#52376383 (если понимать ситуацию как конкретную)
и тут…
github.com/faceyspacey/extract-css-chunks-webpack-plugin
Это незакончится никогда.
stackoverflow.com/questions/52350958/webpack-4-migrating-from-commonschunkplugin-with-splitchunksplugin
Задача деления на чанки по немного другим принципам.
Поиск правильного способа разделения материалов сайтов с помощью Webpack