How to integrate Webpack in a multi-page PHP application

user_855787 0
Viewed 3548

I'm working on an old Codeigniter website where the Javascript codebase is messy and poorly structured and I would like to use Webback to manage the scripts. My goal would be start using it to bundle the code I have the way it is, and gradually refactoring it to make use of modules and imports.

At the moment I'm using Gulp on development (but mostly to minify the files) and Carabiner (a Codeigniter library) to insert the scripts in the views.

The scripts, which are all written as IIFEs are not bundled, so in every controller function I have an array of the scripts needed in that page. For example:

public function homepage()
{
    $this->carabiner->js([
        ['libraryThatIOnlyNeedHere.min.js'],
        ['myscript1.js'],
        ['myscript2.js'],
        ['myscript3.js'],
    ]);

I would like to use Webpack to create a series of bundles so that I end up loading maximum two files on every page: one for the libraries and one for my scripts.

All the practical examples I've seen with Webpack, though, are for Single Page Applications where it's quite easy to bundle everything together.

What would be the best approach in my case? Considering that the code is still not ready to properly use modules and imports, shall I create many entry points in the Webpack configuration file, possibly one for every page and list every script needed in that page?

gulp webpack codeigniter php javascript
1 Answers

Main idea behind webpack is to build modules graph from provided sources and then to combine it into bundles. If your code doesn't have explicit dependencies - it may be good idea to start with creating a module from every file using any of available approaches (AMD, CommonJS, etc). You will need to create module identifiers and define dependencies for every module. It may be worth to read this article for example.

As intermediate step you may want to use some loader like Require.JS to load your modularized code.

Until this step will be done - there is not much use of Webpack.

user_26339560
Related