Laravel: Using Webpack via NPM

In this chapter we will cover working with Webpack and NPM with Laravel. As we’ve worked with NPM previously, this lesson's tasks should be a little easier to follow.

1. Introduction to Webpack (a Module Bundler)

Firstly to introduce Webpack, this is a module bundler which collates all our imported packages, i.e. all the packages which we install into our project using NPM can be compiled using Webpack (mainly the JS and Sass). Webpack does usually require some basic configuration, however with Laravel this is ready for us out of the box.

Previously when we have utilised Bootstrap, jQuery, FontAwesome and other third-party offerings we implemented them into our project using a CDN, copying and pasting the CSS and script elements hosted from a remote server. Now that we’re using a module bundler, we no longer need to rely on CDNs (there’s nothing wrong with doing so however) and we can import them locally into our projects.

Webpack requires our assets (the JS and Sass) to be compiled and we can do this using NPM, similar to how we previously compiled Sass. With Laravel we can run the following terminal/CLI commands to invoke Webpack:

Command	Description
`npm run watch`	This will watch our `app.js` and scss files for any changes and compile them as we develop concurrently (which is useful to have running in another terminal window as we develop).
`npm run production`	This will compile our resources, ready for us to deploy into production/live. This will also minify our code SCSS and JS code. Running this command can take a few minutes to complete.

The benefits of using a module bundler rather than a CDN is that we can easily track all our project’s dependencies and we can update them easily, by running a simple command:

npm update

Which will run through all our packages and update them to the latest version. We can also independently update single packages too, rather than our entire library.

Additionally using a module bundler ensures that all the site/application’s resources are loaded from a single server, rather than retrieving dependencies (CSS/JS) from other web sources.

2. Importing Packages into Webpack

Bundling or 'importing' packages is actually a straight-forward task. For demonstration of this we’ll describe how to import the Bootstrap front-end framework that we’ve previously used over a CDN.

Firstly using NPM we must install the package (i.e. Bootstrap) into our project, which can be done by simply using the following command:

npm install bootstrap

Once complete this will provide all the necessary resources. We now need to use Webpack to import both the JS and SCSS.

3. Importing JS

In our Laravel project open the resources/js/app.js file in your preferred IDE/editor (e.g. Atom, Visual Studio etc.).

Then add the following line at the top of the file, after any other ‘require’ or ‘import’ statements:

require('bootstrap');

This will now import all of Bootstrap’s JS. Depending on the NPM package we install, the require statement may need to be substituted for an import statement, for example (for the TypeIt package):

import TypeIt from "typeit";

Or for jQuery:

var $ = require('jquery');

The documentation for the relevant package should describe which statement to use.

4. Importing CSS/SCSS

Now that we’ve imported the Bootstrap JS, we now need to import the Bootstrap styling. We can import either the minified CSS or the source SCSS, we’ll opt for the latter as we’re using Sass in our Laravel project too.

In our Laravel project open the resources/sass/app.scss file in your preferred IDE/editor (e.g. Atom, Visual Studio etc.).

Now add the following line (preferably) at the top of the file:

@import "node_modules/bootstrap/scss/bootstrap";

Now that we’ve added both our JS and SCSS import/require statements, upon compiling via Webpack the Bootstrap JS/CSS will be included in our project’s .JS and .CSS files locally. At this stage we can run the npm run production command in the terminal to begin the compiling/bundling.

5. Referencing Our Compiled Code in Blade

Finally now that we’ve compiled our JS/CSS files, we can begin to use them. In your Blade file (i.e. your view/HTML) add the following line:

Inside the <head> element of your HTML document to use our local app.css file, which has Bootstrap compiled inside.

Next for the JS, at the bottom of your Blade file before the closing </body> element add the following:

Which will use our local compiled JS file, and again this has Bootstrap’s JS compiled inside.

After we have included both our local compiled JS and CSS files, we can begin to use the packages we’ve imported. So we can use Bootstrap as we normally would. We can also import multiple packages into our JS/SCSS files, as much as we need to develop our project(s). Additionally we can also add our own custom JS and SCSS code in the respective files in the ‘resources’ directory of Laravel. (We should never write directly to the compiled files as they will be overwritten on the next compile.)

And that’s all for using a module bundler such as Webpack, as you can see it’s straight-forward when used with Laravel. For more information on using Webpack with Laravel, please see the “Compiling Assets (Mix)” page on the Laravel Docs.

Please install Bootstrap on your practice Laravel project, as it will come in handy when we do some basic front-end in the next lesson where we implement CRUD and use Blade.

Author(s)

Arif Ullah

Developer & CEO