<before-after width="400px" before="https://github.com/breatheco-de/content/blob/master/src/content/lesson/../../assets/images/bc337938-55c4-40e2-a370-5d69bf084a3b.png?raw=true" after="https://github.com/breatheco-de/content/blob/master/src/content/lesson/../../assets/images/41afcd74-81dd-4e6e-98ee-fc2642a07e7f.png?raw=true" />
Webpack is this thing that grabs all your application pieces (Files, Images, Fonts, JS, CSS, HTML, etc.) and bundles them into one big file. That way you can split your application into many parts and then combine them at the end of the coding process.
Then, the browser will be able to request (GET) that one file and display/render the whole website… that’s it! It’s very similar to what happens with the ".exe" files in windows – all of your application is inside the .exe file, and then you just double-click it.
Basically, there is no way to maintain a big application if you don’t split it into several smaller files (divide and conquer).
But that is only the beginning, because, now that Webpack has control over the whole bundle process, it also has access to your code and it can improve it in so many ways! For example:
A ton more.
The list is endless – we better continue or we’ll be here all day 🙂
If you don’t have a package.json file in your application root, then you probably have not even started your NPM application. Start by typing the following in your command line:
Once you have your package.json you can install the Webpack library by doing:
That is it! You finally have Webpack but now we have to specify how it should build our application (create the bundle).
Create a webpack.config.js file in your root directory and fill it with the following base code:
The only thing that Webpack needs from you is specifying the export property of the module object.
As you can see, the module object is not declared anywhere, but don’t worry about that, it’s something that exists magically on every npm application (like the one we have just created).
Your job is to specify at least the following properties inside of the module.exports object:
|output||Here you have to specify two things:|
path: The folder where the bundle will be created, it’s normally called "dist" or "public." All your application public files will be here.
For example, if we want to include CSS files in our bundle, we have to use the following command inside our index.js file:
Now that you have the libraries, you need to tell Webpack how to use them in the webpack.config.js . For example, we can update the file with the following:
Above, we are telling Webpack that the css-loader will load any imported ".css" file into our bundle and the style-loader will know how to include it depending on the size (using a style tag probably).
From here on, it’s up to you – just keep installing plugins and learning how to configure them in your webpack.config.js file. Here is a more detailed list of awesome plugins you can use:
You don’t have to be configuring Webpack all the time. You can include the configuration file in your repository – that way everything is synced between all the environments and developers. You can also save some webpack.config.js files as templates for future projects.
You can also find and download online configurations that are already completed and fine-tuned for various different application architectures that are out there: React, Angular, Vanilla JS, WordPress, etc.
All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.