A
A
Alexander2017-02-01 23:37:28
webpack
Alexander, 2017-02-01 23:37:28

How to tie WebPack to the back-end?

Made a small project. I wrote a backend in php using the MVC pattern according to this example https://habrahabr.ru/post/150267/. Here the backend is responsible for placing templates and for connecting css, js, jquery, as well as several jq plugins (loaded via bower) to each template. It became inconvenient to work with js and css files and I decided to attach webpack to my project.
The client side of the application looks like this:
c037dd0454b60b8a07677503fd262c5a.png
I decided to collect everything in a single file. I need to connect all js files, as well as scss files to the project. But the problem is that php is responsible for connecting templates and I don't know how to connect bundles where they are needed. I solved the problem by checking if there is a certain DOM element on the page, if it is, then I connect the required bundle, if not, then I skip it. Tell me, is this the wrong approach? If not, what should be done in this case?
I made this config. file:

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'
            }
        ]
    }

};

And here is the main main.js file:
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();

I would be happy to hear advice on this matter. Thank you in advance

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question