Как прикрутить WebPack к back-end?

Question

[Александр]

Сделал небольшой проект. Написал на php бэкенд с использованием MVC паттерна по этому примеру https://habrahabr.ru/post/150267/. Тут бэкенд отвечает за размещение шаблонов и за подключение css, js, jquery, а так же нескольких jq-плагинов (загружены через bower) к каждому шаблону. С js и css файлами работать стало неудобно и я решил прикрутить webpack к моему проекту.

Примерно так выглядит клиентская часть приложения:

Я решил собрать всё в единый файл. Мне нужно подключить все js файлы, а так же scss файлы к проекту. Но проблема состоит в том, что у меня за подключение шаблонов отвечает php и я не знаю, как подключать бандлы там, где они нужны. Я решил проблему тем, что я проверяю есть ли определённый DOM-элемент на странице, если он есть, то я подключаю нужный бандл, если нет, то пропускаю. Скажите, это неправильный подход? Если нет, то как нужно делать в данном случае?

Я составил такой конфиг. файл:

var webpack = require("webpack");

module.exports = {
    entry: "./public/test/main.js",
    output:{
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "./bower_components/jquery/dist/jquery.min.js",
            jQuery: "./bower_components/jquery/dist/jquery.min.js",
            "window.jQuery": "./bower_components/jquery/dist/jquery.min.js"
        })
    ],
    module: {
        loaders: [
            {
                test   : /\.js$/,
                exclude: /node_modules/,
                loader : 'babel-loader',
                query  : {
                    presets: [ 'es2015' ]
                }
            },
            {
                test   : /\.scss$/,
                exclude: /node_modules/,
                loader : 'style-loader!css-loader!sass-loader'
            }
        ]
    }

};

И вот такой главный файл main.js:

require( './../../assets/styles/*.scss' );

var catalog_copy = require("./catalog_copy"),
    catalog_one_product = require("./catalog_one_product"),
    contacts = require("./contacts"),
    gallery = require("./gallery"),
    main = require("./main"),
    portf = require("./portf"),
    send = require("./send"),
    slider = require("./slider"),
    thank_script = require("./thank_script");

if (document.querySelectorAll('.order_button')){
    catalog_copy();
    slider();
}
//catalog_one_product();
if (document.querySelector('.footer')){
    contacts();
}
//gallery();
if (document.querySelector('.left_menu_wrapper')){
    main();
}
if (document.querySelector('.portf_block-shadowlayer')){
    portf();
}
send();

Буду рад услышать советы по данному вопросу. Заранее благодарю

Comments

[Олег Драпеза]

Вы можете в entry указывать несколько точек входа, и подключать в нужном шаблоне нужный скрипт - бандл.

Что бы в будущем не возникало проблем из-за привязки к селекторам, попробуйте использовать js фреймворк. Например, посмотрите как php фреймворк Laraver используется вместе с Vue.js - https://laravel.com/docs/5.4/frontend

[Александр]

Олег Драпеза: спасибо! Обязательно гляну