Webpack

We’ve plenty of experience using webpack module bundler version 1 & 2 for around a year to handle the tooling around hot module replacement development and transpiling our react apps into build versions.

What is webpack?

webpack is a module bundler for modern JavaScript applications. It is incredibly configurable, however, there are Four Core Concepts we feel you should understand.

Entry

webpack creates a graph of all of your application’s dependencies. The starting point of this graph is known as an entry point. The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application’s entry point as the contextual root or the first file to kick off your app.

In webpack we define entry points using the entry property in our webpack configuration object.

The simplest example is seen below:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

There are multiple ways to declare your entry property that are specific to your application’s needs.