Our WebPack configuration handles all our asset bundling needs for our Express application. Previously, our application was using Node.js's own module system to link different files together in our application. However, with WebPack bundling, our Express files are actually merged into a single express.bundle.js file that contains all our application's logic while still retaining their underlying relationships to each other. This also means that any processing done to our files, including TypeScript, can be applied consistently across all the assets of our project.
However, there are few unique things about our WebPack project's configuration that are important to point out. First is the target option, which tells WebPack what environment we are intending to build this project for. This is important because the manner in which Node.js and web applications bundle resources can be very different. For example, a big difference is that separate files in a web application are loaded via separate HTTP requests, but in our Node.js application, files are loaded only once into a Node.js process.
This is also why the externals option in our WebPack configuration is so important. Without this option, WebPack would build our node_modules dependencies into our bundle. This would create an unnecessarily large bundle file, and because we aren't in a browser, there is no overhead performance penalty to loading these dependencies normally with Node.js.
We will also want to ensure that we set the _dirname: false flag in our node options configuration. The reason for this is to separate the concern of our application for loading project, and the actual resolving of those project files in our filesystem. By setting this flag to false, we are telling our Node.js process that __dirname is equal to our /dist directory, as opposed to its default context of our project root.
| Value | Description |
| true | __dirname is relative to the WebPack project context, usually, the project root directory; this is the default value |
| false | __dirname is relative to the output file location (/dist in our case) |
| mock | __dirname is the fixed value "/" |
With these configuration changes in place, we can use WebPack to build a Node.js application that will allow us to easily manage and upgrade our build configuration as our application evolves.