WittCode💻

Webpack Targets

By

Learn about Webpack targets and how they can be used to build applications suited for different environments such as a Node server environment or browser environment.

Table of Contents 📖

What are Webpack Targets?

JavaScript can exist on both the server as a Node application and in the browser. Therefore, Webpack can be configured to bundle an application for a server environment or browser environment. For example, if we were bundling a Node application with Webpack we would want Webpack to work with a server environment, whereas if we were bundling a React app with Webpack we would want Webpack to work with a browser environment. Webpack generates the environment specific code at runtime.

Setting the Webpack Environment

We can inform Webpack about the environment of an application by using the top level target key in a Webpack configuration file.

module.exports = {
    target: 'web',
    entry: './src/index.js',
    output: {
        path: `${__dirname}/my-output`,
        filename: 'my-bundle.js'
    },
}

Here we have set the target to web, this is also the default value. Setting the target to web will cause Webpack to compile the application for usage in a browser environment. To demonstrate, if we try to require the Node fs module inside a JavaScript file that Webpack is bundling, it will throw an error.

const fs = require('fs');

Now run webpack with npm run build and look for the output.

npm run build
ERROR in ./src/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/wittcode/Desktop/webpack-targets/src'
resolve 'fs' in '/Users/wittcode/Desktop/webpack-targets/src'
    Parsed request is a module
    using description file: /Users/wittcode/Desktop/webpack-targets/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
        /Users/wittcode/Desktop/webpack-targets/src/node_modules doesn't exist or is not a directory
        looking for modules in /Users/wittcode/Desktop/webpack-targets/node_modules
        single file module
            using description file: /Users/wittcode/Desktop/webpack-targets/package.json (relative path: ./node_modules/fs)
            no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/wittcode/Desktop/webpack-targets/node_modules/fs doesn't exist
            .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/wittcode/Desktop/webpack-targets/node_modules/fs.js doesn't exist
            .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/wittcode/Desktop/webpack-targets/node_modules/fs.json doesn't exist
            .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /Users/wittcode/Desktop/webpack-targets/node_modules/fs.wasm doesn't exist
        /Users/wittcode/Desktop/webpack-targets/node_modules/fs doesn't exist
        /Users/wittcode/Desktop/node_modules doesn't exist or is not a directory
        /Users/wittcode/node_modules doesn't exist or is not a directory
        /Users/node_modules doesn't exist or is not a directory
        /node_modules doesn't exist or is not a directory

webpack 5.88.1 compiled with 1 error and 1 warning in 113 ms

Within this stack trace we can see a module not found error. Now, lets switch the target to node.

module.exports = {
    target: 'node',
    entry: './src/index.js',
    output: {
        path: `${__dirname}/my-output`,
        filename: 'my-bundle.js'
    },
}

Now run webpack again with npm run build.

npm run build
webpack 5.88.1 compiled in 101 ms

Now the error has disappeared as Webpack is expecting a Node like environment. Webpack also has more targets than node and web. For example, it can also target an Electon environment. Electron is a framework that allows developers to build desktop applications with JavaScript. There are different variations of Electron Webpack can handle. One of which is electron-main.

module.exports = {
    target: 'electron-main',
    entry: './src/index.js',
    output: {
        path: `${__dirname}/my-output`,
        filename: 'my-bundle.js'
    },
}

This configuration will make Webpack include Electron specific variables.