Есть сайтик на php. Встал вопрос организациии js. Код условный
Например
Страница A.html
Страница B.html
Страница C.html
1.js-bundle - плагин или конструктор(например function Gallery)
2.js-bundle - плагин или конструктор(например function Slider)
3.js-bundle - плагин или конструктор(например function Accordion)
Получаем
Страница A.html
<script src="1-bundle.js">
<script src="2-bundle.js">
<script src="A.js">
Страница B.html
<script src="1-bundle.js">
<script src="3-bundle.js">
<script src="B.js">
Страница C.html
<script src="2-bundle.js">
<script src="3-bundle.js">
<script src="C.js">
Соотвественно на каждой странице хочется сделать логику взаимодействия этих самых модулей
A.js
var module1 = new Module() // из 1.js
var module2 = new Module() // из 2.js
// Тут логика взаимодействия модулей(не обращать внимание на связанность)
module1.button.click(function(){
module2.init()
})
B.js
var module1 = new Module() // из 1.js
var module3 = new Module() // из 3.js
// Тут логика взаимодействия модулей(не обращать внимание на связанность)
module1.button.click(function(){
module3.init()
})
C.js по аналогии
Так вот как это все организовать через Webpack и вообще можно ли это сделать?
Проблемы
Каждый модуль (1-bundle.js, 2-bundle.js, 3-bundle.js) - это бандл(плагин + обертка для работы).
В связи с пунктом 1 - все модули изолированы.
Поэтому не получиться вызвать конструкторы 1-bundle.js и 2-bundle.js в A.js. Нужно их делать глобальными. Тогда зачем вебпак
3.Можно организовать бандл A-bundle.js в котором
import 1.js;(не бандл)
import 2.js;(не бандл)
var module1 = new Module() // из 1.js
var module2 = new Module() // из 2.js
Но тут получается свой бандл(A-bundle.js) на каждую страницу, а если таких типов страниц 50.(A-bundle.js,B-bundle.js,C-bundle.js)
То есть если бы можно организовать код так
<script src="1-bundle.js">
<script src="2-bundle.js">
<script src="A.js">
То когда мы заходим на страницу В.html со страницы A.html, то 1-bundle.js уже загружен и береться из кэша. То есть каждый модуль грузится один раз и когда нужен подгружается из кэша. В случае с бандлами(A-bundle.js,B-bundle.js, C-bundle.js ) на каждой странице - js файл грузиться каждый раз заново(за исключением случаев когда ты заходил уже на эту страницу)