How to use webpack in a ready-made PHP application?

Question

webpack

Greetings. Tell me, there is a ready-made application in PHP, where HTML is generated on the server, on the client a little more jquery loads the data with ajax.
I am slowly switching to vue js, but I use the already compiled version with CDN. You can also pull up vuex from the CDN by simply pointing vue-ressource to them. But how can you use other libraries that are installed only through NPM and require builds that cannot be connected with the CDN to run. How can you make friends with an existing application written in PHP? Of course, there was an idea to write a client single-page application that would communicate purely via API... But so far it is too labor-intensive and unprofitable... <script src="***"></script>

Answer 1

I myself am in the same position - I will soon install the webpack after rebuilding the project ...
webpack is a millet collector, it generates approximately the same file that you will need to include in the same template, instead of the CDN version ... then there is a managed composition, unlike CDN
, npm modules lie quietly in the root of the project in the node_modules folder ... you write your js files depending on the project structure - you decide where ... in the webpack config you just include your files ... and generate them to a file in the folder where the server looks ... and that's all
1. You need to get the resulting script from the written code via webpack
2. You need to connect the resulting script to the template/layout (in short, to the view)
This moment is no different for a full-fledged site, for SPA, and here and there you get scripts for the client

Answer 2

Yes, in principle, webpack doesn’t care what you have there on the backend: CMS, framework, custom solution, it only cares about the presence of:
1) input files
2) a place to upload the result
3) a config that you can specify what will happen while the files are moving from 1 to 2
If the question is exactly how to arrange it structurally, then it depends on your own preferences and / or the already existing project structure.

Answer 3

And what prevents you from abandoning the CDN and installing all packages via npm, including vue, vuex and others?

Answer 4

In my opinion, it's easier to start writing SPA right away. Because you will first finish the PHP project in conjunction with VueJS, and then, when you want to write a full-fledged SPA, you will still have to write from scratch. Outcome: Double, and even triple work.
Further, what I will describe is probably not correct, because I myself have just started learning Vuejs in conjunction with PHP (Laravel).
1. The stage of connecting NPM packages.
1.1. We initialize init.
2. We load the necessary modules - webpack, the necessary libraries (ala vuejs, etc.)
3. Rewrite the site code to connect VueJS.
4. We finish some parts of the site where we need to use the modules we need (axios (better than vue-resource), vuex, etc.)