Pic

Use Webpack to make your app faster, better, and stronger

What does a module bundler do? A module bundler will bundle all specified files into one single JavaScript file. This means that we can use our app in a particular modular way. Using a modular workflow has many benefits, such as:

Namespacing

No need for files to be globally available

Maintainability

Keeping a module maintained is easier when it isn't tightly coupled to another module

Reusability

Each module of our app can be re-used in many places

If we weren't using a module bundler, we'd have to use <script> tags in our index.html file; every JavaScript files we include here is globally available and loaded when the page loads. With a module bundler, files are only loaded as and when they're required.

So if the 'About Us' section of our website depends on some JavaScript modules, they will only load onto the page when we navigate to 'About Us'. This by default makes our app faster and more efficient. Since just a few years ago, our workflow has changed; we aren't using <script> tags anymore - instead we're using import to explicitly specify which modules are required when and where.

How does using Webpack affect our experience writing code?

Using Webpack, we find we have optimisations in our experience writing code.

  • We have the ability to 'hot-reload'
  • Our page can update as soon as a relevant file is changed. Only the affected module will refresh; the rest of the app doesn't need to. This could save hours of time per week - imagine working on a very large site, with complex pages involving many modules.
  • It's easy to see what a file's dependencies are
  • Using import at the top of the file for each module which is required, it's easy to tell what this module is using. Importing modules has always been available in Node; now it's available on the front end.
  • CSS modules
  • It's not just our JavaScript that benefits from Webpack. If we use CSS modules, we don't need to worry about writing code with naming conventions in mind. For example, if we are using BEM in our project, without CSS modules we have to specify the block name in every classname within the module. This can be really hard and nasty to read. We can let Webpack take care of this for us using CSS modules, so BEM, for example, is still being compiled into the DOM - but we don't have to specify block names manually. So we get all the benefits of a naming convention without the negatives.

Get started today

Webpack goes particularly well with React. It can be tricky and very time-consuming to write a Webpack configuration file, because of a number of factors: * Unfamiliar syntax * Tricky documentation * Reliance on other sources, such as Babel Luckily we can get around this if we want to get up and running with React and Webpack without having to write a Webpack configuration file. All we need is create-react-app, which is a package available from npm.

After installing, we can head to the command line and initialise a brand new app which is ready within minutes. Then we can focus on writing our app rather than focussing on anything related to build. For quickly getting started with React and Webpack, all we are really concerned about is the fact that we have a bundled JavaScript file so that we can import any modules that we need. For more bespoke solutions, we would need to amend our Webpack configuration file, but for getting up and running with a simple way of doing it, create-react-app is all we need.

If we wanted to use Vanilla JavaScript, or another framework instead of React, we could use the equivalent of create-react-app specific to the framework, or we could build our own configuration from scratch.


← Back to all articles

Tags