Using Webpack in Codeigniter 3 – Part 1 Set-Up

Webpack is a brilliant tool for bundling all your assets and their dependencies into one single file to distribute with your website. Out of the box Codigniter doesn’t include any kind of modern front-end tooling so we will have to import webpack and set it up from scratch. This will most likely be a multi part series to cover this topic.

We can compile our Javascript modules, build any SASS/LESS files and even minify everything, so lets get started.

You need NPM installed to install and use webpack.

As mentioned CI comes with no modern build tools (or any build tools for that matter) so first lets create our package.json file.

npm init -y

This create us a default package.json file that we will use for this project. The next step is to install webpack, you have 2 options you can install it globally (my preferred, method and this tutorial will assume you have it globally if you don’t you must call the webpack executable directly) method or install it locally.

Globally:

npm install webpack -g

Locally:

npm install webpack

Now lets create a few folders to use. Like most other frameworks and applications in any language you have a src folder and a dist folder. The src folder contains all our raw files where the dist folder will hold all our complied files which we will include in our webpages. If you’re using source control (and you should be) it’s best to add the dist folder to your .gitignore file so it doesn’t get pushed to the repo.

Create the following folders:

/application/dist/css
/application/dist/js
/application/src/css
/application/src/js

That’s great, now we need to create NPM scripts in our package.json file. These scripts can then be run from the command line to save typing out large commands in the terminal over and over. Delete the default script that’s put in the package.json file and add the following:

"scripts": {
"build": "webpack application/src/js/main.js application/dist/js/complied.js"
},

You can call these scripts what ever you like, here I’ve named this one “build”. The build script calls webpack and tells it to compile our JS file from the src/js folder and put the complied JS into the dist/js folder. Cool huh?

Okay almost ready, lets create a JS file for this demo. Add main.js to our src/js folder:

alert('Hello Webpack')

Not the most advanced Javascript in the world but its a nice way to know things are working.

Now in your terminal in the project root folder (where the package.json is) run:

npm run build

This will trigger the webpack build process and compile the main.js in the src folder and place it in the /dist/js/complied.js file. Lets include our complied JS file into our project, in your view file add:

<script src="application/dist/js/complied.js"></script>

Now load up your browser and you should get a Javascript alert 🙂 we are now rocking webpack!

Now make a change to your JS source file to alert ‘hello codeigniter’ and refresh the browser… huh? what? nothing changed? That’s because we need to re-compile the JS again by running npm run build. As you can probably guess this will get annoying very quickly so lets add another script to our package.json file:

"scripts": {
"build": "webpack application/src/js/main.js application/dist/js/complied.js",
"watch": "npm run build -- --watch"
},

The watch command is slightly different to our build command. Here we tell it to run the build command and then we add the –watch flag on to the end. You can call one script from another by simply putting npm run {name of the script}. If you want to pass additional flags to the other script you need to add a double dash (–) and then the command, in our case –watch.

So if we now run:

npm run watch

The script will now stay open in the terminal and watch for any changes in our src/js/main.js file. Give it a go, make a change in the src/js/main.js file and refresh the browser, the new code will be complied automatically for you every time you make a change.

We have made a great start in part 1, we have covered a lot of ground. In part 2 we will create a config file which will make managing webpack much easier as we expand our project to use other tools and other files in our src folder.

One thought on “Using Webpack in Codeigniter 3 – Part 1 Set-Up”

Leave a Reply

Your email address will not be published. Required fields are marked *