
Webpack Basics
Webpack is the king of JavaScript tooling. What does it do for me?
Webpack takes one file and brings in all other code that is imported as it works its way through a dependency tree.
So I made this assumption that everyone writing frontend code understands the landscape and history of JavaScript. That is not the case. And you don’t have know everything to be efficient in writing a JavaScript app. So here is some information around the basics of Webpack and the problems that is solves.
Webpack at its purest is a module bundler. If you are writing JavaScript in more than one file but want to have access to functions and classes in other files, you will need to connect your JavaScript. You do this with a bundler. It takes all your files and neatly puts them into one file.
In input.js we imported a class, Component . In the ES2015 import syntax we specified the location of the class. Our class is not in the module. So how does this work in a large modern JavaScript application? Well Webpack needs to make a module tree.
Webpack needs a root position in your app to start making a tree of imports for your module. Webpack calls this a dependency graph and the root of the graph is call the entry point. To define this entry point we need a Webpack config file in our project. In the command line we give Webpack our config file and the bundle is created. Here is a basic Webpack config.
The output file it the bundle the is created out of all the imports that tree off the entry file. Webpack takes one file and brings in other code that is imported as it works its way through all the files. That is Webpack at its most basic.
We need to take the bundle and add it to the page we need our JavaScript on.
Webpack also two other core features, Loaders and Plugins. Loaders give you the ability to make modules out of file types other that JavaScript. Plugin allow you to hook into the inner lifecycle of Webpack and perform actions when specific events are emitted.
You should be using es2015 so we are going to need the babel-loader to give us our transpile functionality. We do this by adding a module property to our config. For all JavaScript files we will use Babel to transpile ES2015 to ES5 and skip node_modules.
This is the tip of the iceberg for Webpack. Next you can learn about using Webpack for development servers, transpiling TypeScript or React’s JSX. This is only the beginning.
If you found this helpful at all please hit the ❤ button . It helps this post reach more people.
I post on twitter about new article here. I would also really enjoy hearing any response. Just leave them below!
