Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt

Use this file to discover all available pages before exploring further.

The node option configures whether to polyfill or mock certain Node.js globals and modules. This is useful when bundling code that uses Node.js APIs for the browser.

​
Basic Configuration

webpack.config.js
module.exports = {
  node: {
    __dirname: false,
    __filename: false,
    global: true
  }
};

​
Node Options

​
node
object | false
Configure Node.js polyfills.
node: {
  __dirname: true,
  __filename: true,
  global: true
}
// or disable all polyfills
node: false

​
Available Options

​
__dirname

​
node.__dirname
boolean | 'warn-mock' | 'mock' | 'eval-only'
Configure __dirname variable behavior.
node: {
  __dirname: false // Use actual __dirname value
}
  • true: Provide the directory name of the module file
  • false: Use Node.js __dirname value (path to the webpack output)
  • 'mock': Provide '/' as value
  • 'warn-mock': Provide '/' with a warning
  • 'eval-only': Only available in eval-based devtools
Default: false (webpack 5)

​
__filename

​
node.__filename
boolean | 'warn-mock' | 'mock' | 'eval-only'
Configure __filename variable behavior.
node: {
  __filename: false // Use actual __filename value
}
  • true: Provide the filename of the module file
  • false: Use Node.js __filename value
  • 'mock': Provide '/index.js' as value
  • 'warn-mock': Provide '/index.js' with a warning
  • 'eval-only': Only available in eval-based devtools
Default: false (webpack 5)

​
global

​
node.global
boolean | 'warn'
Configure global variable behavior.
node: {
  global: true // Provide polyfill
}
  • true: Provide a polyfill
  • false: Do not provide a polyfill
  • 'warn': Show a warning when global is used
Default: false (webpack 5)

​
Webpack 5 Changes

Webpack 5 stopped providing Node.js polyfills by default. You need to:
  1. Configure node option to control built-in globals
  2. Use resolve.fallback for Node.js core modules
  3. Install polyfill packages manually

​
Migration from Webpack 4

​
Webpack 4 (Automatic Polyfills)

// Webpack 4 - automatic polyfills
module.exports = {
  // No configuration needed
};

​
Webpack 5 (Manual Configuration)

const webpack = require('webpack');

module.exports = {
  node: {
    global: true,
    __filename: true,
    __dirname: true
  },
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
      "util": require.resolve("util/"),
      "assert": require.resolve("assert/"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "url": require.resolve("url/"),
      "path": false,
      "fs": false
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};
Install polyfills: 
npm install --save-dev \
  crypto-browserify \
  stream-browserify \
  buffer \
  util \
  assert \
  stream-http \
  https-browserify \
  os-browserify \
  url \
  process

​
Common Configurations

​
Browser Application (No Polyfills)

webpack.config.js
module.exports = {
  target: 'web',
  node: false // Disable all polyfills
};

​
Browser with Node.js Globals

webpack.config.js
const webpack = require('webpack');

module.exports = {
  target: 'web',
  node: {
    global: true,
    __filename: true,
    __dirname: true
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

​
Electron Application

webpack.config.js
module.exports = {
  target: 'electron-renderer',
  node: {
    __dirname: false,
    __filename: false
  }
};

​
Node.js Application

webpack.config.js
module.exports = {
  target: 'node',
  node: {
    __dirname: false,
    __filename: false
  }
};

​
Polyfill Packages

​
Core Modules

# Essential polyfills
npm install --save-dev \
  process \
  buffer

# Crypto and streams
npm install --save-dev \
  crypto-browserify \
  stream-browserify \
  browserify-zlib

# Network
npm install --save-dev \
  stream-http \
  https-browserify

# Utilities
npm install --save-dev \
  util \
  assert \
  url \
  path-browserify \
  os-browserify

# Events
npm install --save-dev \
  events

​
Configuration with Polyfills

webpack.config.js
const webpack = require('webpack');

module.exports = {
  resolve: {
    fallback: {
      // Full polyfills
      "assert": require.resolve("assert/"),
      "buffer": require.resolve("buffer/"),
      "console": require.resolve("console-browserify"),
      "constants": require.resolve("constants-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "domain": require.resolve("domain-browser"),
      "events": require.resolve("events/"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "path": require.resolve("path-browserify"),
      "punycode": require.resolve("punycode/"),
      "querystring": require.resolve("querystring-es3"),
      "stream": require.resolve("stream-browserify"),
      "string_decoder": require.resolve("string_decoder/"),
      "sys": require.resolve("util/"),
      "timers": require.resolve("timers-browserify"),
      "tty": require.resolve("tty-browserify"),
      "url": require.resolve("url/"),
      "util": require.resolve("util/"),
      "vm": require.resolve("vm-browserify"),
      "zlib": require.resolve("browserify-zlib"),
      
      // Disable (not available in browser)
      "fs": false,
      "net": false,
      "tls": false,
      "child_process": false
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_DEBUG': JSON.stringify(false)
    })
  ]
};

​
ProvidePlugin for Globals

webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      // Make process available
      process: 'process/browser',
      
      // Make Buffer available
      Buffer: ['buffer', 'Buffer'],
      
      // Make global available
      global: require.resolve('./global-shim.js')
    })
  ]
};
Create global-shim.js:
global-shim.js
module.exports = (function() {
  return this;
})() || Function('return this')();

​
Handling Specific Modules

​
Buffer Usage

// Install
npm install --save buffer

// Configure
module.exports = {
  resolve: {
    fallback: {
      "buffer": require.resolve("buffer/")
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

​
Process Usage

// Install
npm install --save process

// Configure
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  ]
};

​
Crypto Usage

// Install
npm install --save crypto-browserify

// Configure
module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify")
    }
  }
};

​
Disable Specific Modules

When a module is not available in browser:
webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      "fs": false,        // File system
      "path": false,      // Path
      "net": false,       // Network
      "tls": false,       // TLS
      "child_process": false // Child processes
    }
  }
};

​
Error Messages

​
Module not found: Error: Can’t resolve ‘crypto’

resolve: {
  fallback: {
    "crypto": require.resolve("crypto-browserify")
  }
}

​
ReferenceError: Buffer is not defined

const webpack = require('webpack');

plugins: [
  new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer']
  })
]

​
ReferenceError: process is not defined

const webpack = require('webpack');

plugins: [
  new webpack.ProvidePlugin({
    process: 'process/browser'
  })
]

​
Best Practices

​
1. Only Polyfill What You Need

// Bad - polyfill everything
resolve: {
  fallback: { /* 20+ polyfills */ }
}

// Good - only what's used
resolve: {
  fallback: {
    "crypto": require.resolve("crypto-browserify"),
    "stream": require.resolve("stream-browserify")
  }
}

​
2. Consider Bundle Size

Some polyfills are large. Consider alternatives: 
// crypto-browserify is large (~300KB)
// Consider server-side crypto or Web Crypto API instead

​
3. Use Empty Modules for Unused Code

resolve: {
  fallback: {
    "fs": false // Empty module instead of error
  }
}

​
4. Document Your Polyfills

// webpack.config.js
module.exports = {
  resolve: {
    fallback: {
      // Required by: library-name
      "crypto": require.resolve("crypto-browserify"),
      
      // Required by: another-library
      "stream": require.resolve("stream-browserify")
    }
  }
};