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

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

Примерно так выглядит клиентская часть приложения:
c037dd0454b60b8a07677503fd262c5a.png
Я решил собрать всё в единый файл. Мне нужно подключить все 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();


Буду рад услышать советы по данному вопросу. Заранее благодарю
  • Вопрос задан
  • 846 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы