Сделал небольшой проект. Написал на 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();
Буду рад услышать советы по данному вопросу. Заранее благодарю