{"id":10430,"library":"webpack","title":"Webpack","description":"Webpack is a powerful and highly configurable module bundler that takes all your project's assets—JavaScript, CSS, images, fonts, and more—and packages them for deployment, primarily for the browser. It allows you to split your codebase into multiple chunks for optimized, asynchronous loading. The current stable version is 5.106.2, and it receives frequent patch and minor updates to enhance features and stability.","status":"active","version":"5.106.2","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/webpack","tags":["javascript","typescript"],"install":[{"cmd":"npm install webpack","lang":"bash","label":"npm"},{"cmd":"yarn add webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` is still supported in Node.js environments, `import` is the preferred syntax for modern TypeScript and ES module setups when using webpack's Node.js API.","wrong":"const webpack = require('webpack');","symbol":"webpack","correct":"import webpack from 'webpack';"}],"quickstart":{"code":"/* webpack.config.js */\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development', // 'production' or 'none'\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  // Add basic loader for CSS as an example\n  module: {\n    rules: [\n      {\n        test: /\\.css$/i,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n};\n\n/* src/index.js */\nimport './style.css';\nconsole.log('Hello from Webpack!');\n\n/* src/style.css */\nbody { font-family: sans-serif; }","lang":"typescript","description":"This quickstart demonstrates how to set up a basic webpack configuration to bundle a JavaScript file and an imported CSS file into `dist/bundle.js`. To run, save the config, create the `src` files, then execute `npm install --save-dev webpack webpack-cli style-loader css-loader` followed by `npx webpack`."},"warnings":[{"fix":"Explicitly add `mode: 'development'` or `mode: 'production'` to your `webpack.config.js`.","message":"Since webpack 4, the `mode` option ('development', 'production', or 'none') is crucial. Not defining it will result in a warning and a fallback to 'production' mode, which might apply unexpected optimizations or skip helpful development features.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure `webpack`, `webpack-cli`, and any loaders/plugins are listed under `devDependencies` in your `package.json`. If you previously installed globally, consider removing the global install and using `npx` for local binaries.","message":"Webpack and its loaders/plugins are development dependencies. They should always be installed with `--save-dev` (or `-D`) because they are build tools and not required at runtime in your production application.","severity":"gotcha","affected_versions":"*"},{"fix":"Use browser-compatible alternatives where possible. If Node.js built-ins are unavoidable, explicitly polyfill them using webpack's `ProvidePlugin` or configure `resolve.fallback` for specific modules.","message":"Webpack v5 removed automatic polyfills for Node.js built-ins (like `process`, `Buffer`, `crypto`). If your browser-targeted code relies on these, you might encounter `ReferenceError: process is not defined` or similar.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Review your `sideEffects` configuration in `package.json` to ensure asset imports are correctly handled. If unexpected tree-shaking occurs, consider disabling `experimental.futureDefaults` or explicitly marking asset files as having side-effects if necessary.","message":"When using `experimental.futureDefaults`, asset modules (`type: 'asset'`) are only marked as side-effect-free. This can lead to unexpected tree-shaking of asset files if you rely on them having side-effects (e.g., an `import './style.css'` for global styling).","severity":"gotcha","affected_versions":">=5.105.3"}],"env_vars":null,"last_verified":"2026-04-18T00:00:00.000Z","next_check":"2026-07-17T00:00:00.000Z","problems":[{"fix":"Install the missing loader (e.g., `npm install --save-dev some-loader`), correct the module's import path, or install the dependency (`npm install some-module`).","cause":"Webpack cannot find the specified module, usually because a required loader is missing, the import path is incorrect, or the dependency is not installed.","error":"Module not found: Error: Can't resolve 'some-module' in 'path/to/source'"},{"fix":"Instantiate your plugin by calling its constructor: `plugins: [new MyPlugin({ /* options */ })]`.","cause":"You are passing a plugin class definition (e.g., `MyPlugin`) directly to the `plugins` array in `webpack.config.js` instead of an instantiated object.","error":"Error: A plugin must be an instance of WebpackPluginInstance"},{"fix":"Run `npx webpack` to execute the locally installed version, or add a script to `package.json` (e.g., `\"build\": \"webpack\"`) and run with `npm run build` or `yarn build`.","cause":"The `webpack` executable is not in your system's PATH, typically because it's installed as a local `devDependency` and not globally, or `npx` (which resolves local binaries) is not being used.","error":"webpack command not found"},{"fix":"Ensure your `webpack.config.js` and `package.json` are correctly configured for your target module system (ESM or CJS). You might need to adjust `output.module` or use dynamic `import()` within CommonJS contexts for ESM modules.","cause":"Occurs when a CommonJS module attempts to `require()` an ES Module that only provides an ESM export, especially in newer Node.js environments or when there's a mismatch in module resolution configuration.","error":"ERR_REQUIRE_ESM"}],"ecosystem":"npm"}