Plugins are part of every open-source framework these days. They allow developers to write additional functionality into Webpack. From squashing to splitting, to hashing for caching, the Webpack community has built a lot of new functionality around the Webpack platform. There's a lot to discover.
Let's go through a typical Webpack compilation.
Webpack receives a configuration object. It reads the path to the entry point, if none exists, it uses src/index.js This is the file we start with. Then Webpack starts looking for require and import statements. The output, the final destination, and the mode. This tells webpack, what environment we're in, development or production mode.
Now you can treat any front end asset JS, CSS and Images, Fonts, etc, like they're all part of a grand dependency graph. Webpack then orders the graph, and numbers the modules. So code and assets everyone needs get bundled first.
Once Webpack has built the graph and figured out the order, Webpack then optimizes the code for the environment. In development, webpack uses express middleware to reload your code in realtime refreshing it in the browser. In production mode, webpack optimizes for speed and size, stripping out dead code and mangling and minifying it for deployment. Many optimization features are available to get it right for your project.
Now Webpack uses the path set in the output, or in none exists, defaults to dist/ and outputs the frontend assets. Depending on how we wire it up, it resolves all file names automatically. So img link and script tags all point where they're supposed to.
We'll look at configuring webpack in a few ways. With a simple HTML file, using Express and Server-side rendering. And with using Hot Module Reloading for a great development experience.