Even though webpack is used most commonly for bundling web applications, it can do more. You can use it to target Node or desktop environments, such as Electron. Webpack can also bundle as a library while writing an appropriate output wrapper making it possible to consume the library.
Webpack's output target is controlled by the
target field. You'll learn about the primary targets next and dig into library-specific options after that.
Webpack uses the
web target by default. The target is ideal for a web application like the one you have developed in this book. Webpack bootstraps the application and loads its modules. The initial list of modules to load is maintained in a manifest, and then the modules can load each other as defined.
Starting from webpack 5, the default is set to
browserslist in case a browserslist configuration has been found. The change means that webpack will compile its runtime to match the setting instead of generating code that will work in legacy browsers as well. Webpack can target specific language specifications (i.e.
es2020) and also an array of targets is possible (i.e.
webworker target wraps your application as a web worker. Using web workers is valuable if you want to execute computation outside of the main thread of the application without slowing down the user interface. There are a couple of limitations you should be aware of:
webworkertarget is used.
Web workers and their usage are discussed in detail in the Web Workers chapter.
Webpack provides two Node-specific targets:
async-node. It uses standard Node
require to load chunks unless the async mode is used. In that case, it wraps modules so that they are loaded asynchronously through Node
The main use case for using the Node target is Server-Side Rendering (SSR).
Starting from webpack 5, it's possible to target a specific version of Node using for example
If you develop a server using webpack, see nodemon-webpack-plugin. The plugin is able to restart your server process without having to set up an external watcher.
node-webkit- Targets NW.js while considered experimental.
electron-main- Targets Electron main process.
electron-renderer- Targets Electron renderer process.
Webpack supports targets beyond the web. Based on this, you can say name "webpack" is an understatement considering its capabilities.
targetfield. It defaults to
webbut accepts other options too.
You'll learn how to handle multi-page setups in the next chapter.