ef4 · July 20, 2025 09:12 · Jun 25, 2021 · Apr 15, 2021 · Apr 15, 2021 · Apr 15, 2021
diff --git a/examples.md b/examples.md
@@ -121,8 +121,8 @@ import webpack from 'webpack';
 module.exports = {
   plugins: [
     new webpack.ProvidePlugin({
-      // you must `npm install buffer` to use this
-      Buffer: 'buffer'
+      // you must `npm install buffer` to use this.
+      Buffer: ['buffer', 'Buffer']
     })
   ]
 }

diff --git a/examples.md b/examples.md
@@ -1,3 +1,5 @@
+# Webpack 5 Node Polyfills Upgrade Cheatsheet
+
 Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.
 
 So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.
@@ -119,6 +121,7 @@ import webpack from 'webpack';
 module.exports = {
   plugins: [
     new webpack.ProvidePlugin({
+      // you must `npm install buffer` to use this
       Buffer: 'buffer'
     })
   ]

diff --git a/examples.md b/examples.md
@@ -1 +1,141 @@
-Webpack 4 automatically polyfills many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.
+Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.
+
+So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.
+
+
+# List of polyfill packages that were used in webpack 4
+
+For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via `resolve.fallback`.
+
+List taken from [here](https://github.com/webpack/webpack/blob/49890b77aae455b3204c17fdbed78eeb47bc1d98/lib/ModuleNotFoundError.js#L14-L41).
+
+```js
+{
+	assert: "assert/",
+	buffer: "buffer/",
+	console: "console-browserify",
+	constants: "constants-browserify",
+	crypto: "crypto-browserify",
+	domain: "domain-browser",
+	events: "events/",
+	http: "stream-http",
+	https: "https-browserify",
+	os: "os-browserify/browser",
+	path: "path-browserify",
+	punycode: "punycode/",
+	process: "process/browser",
+	querystring: "querystring-es3",
+	stream: "stream-browserify",
+	_stream_duplex: "readable-stream/duplex",
+	_stream_passthrough: "readable-stream/passthrough",
+	_stream_readable: "readable-stream/readable",
+	_stream_transform: "readable-stream/transform",
+	_stream_writable: "readable-stream/writable",
+	string_decoder: "string_decoder/",
+	sys: "util/",
+	timers: "timers-browserify",
+	tty: "tty-browserify",
+	url: "url/",
+	util: "util/",
+	vm: "vm-browserify",
+	zlib: "browserify-zlib"
+}  
+```
+
+
+# Replacing a node module with a polyfill package
+
+Before:
+
+```js
+{
+  node: {
+    // provide a polyfill for "path"
+    path: true
+  }
+}
+```
+
+After:
+
+```js
+{
+  resolve: {
+    fallback: {
+      // make sure you `npm install path-browserify` to use this
+      path: require.resolve('path-browserify')
+    }
+  }
+}
+```
+
+# Replacing a node module with an empty implementation
+
+Before:
+
+```js
+{
+  node: {
+    // provide an empty implementation of the "fs" module
+    fs: false
+  }
+}
+```
+
+After:
+
+```js
+{
+  resolve: {
+    fallback: {
+      fs: false
+    }
+  }
+}
+```
+
+# Polyfilling globals
+
+Three cheap and common Node global variables are still supported directly via webpack's `node` option:
+
+```js
+{
+  node: {
+    // provides the global variable named "global"
+    global: true,
+
+    // provide __filename and __dirname global variables
+    __filename: true,
+    __dirname: true,
+  }
+}
+```
+
+Other globals like `Buffer` will need to be handled directly via `ProvidePlugin` or `DefinePlugin`. For example, to get the `Buffer` global variable you can use the `buffer` NPM package like:
+
+```js
+import webpack from 'webpack';
+
+module.exports = {
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: 'buffer'
+    })
+  ]
+}
+```
+
+Alternatively, to replace a global variable directly with a snippet of code, you can use `DefinePlugin`. For example, if you want to replace `process.env.THING` with `false` you can say:
+
+
+```js
+import webpack from 'webpack';
+
+module.exports = {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.THING: 'false'
+    })
+  ]
+}
+```
diff --git a/examples.md b/examples.md
@@ -0,0 +1 @@
+Webpack 4 automatically polyfills many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Webpack 4 automatically polyfills many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.
No results found