Use Webpack to make your app faster, better, and stronger
No need for files to be globally available
Keeping a module maintained is easier when it isn't tightly coupled to another module
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 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
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.
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.
← Back to all articles