# Common pitfalls and solutions — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-22

> Avoid common Webpack mistakes.

## Learn from mistakes

Webpack errors are often configuration mistakes. Common issues: wrong loader order, missing file extensions, incorrect output paths, unused dependencies bundled. Use webpack-bundle-analyzer to visualize what's included. Read error messages carefully; Webpack provides helpful guidance. Test bundle output locally before deployment.

## Debug bundle contents

Analyze what's in your bundles.

```bash
# Install analyzer
npm install --save-dev webpack-bundle-analyzer

# Add to webpack.config.js
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [new BundleAnalyzer()]
};
```

Output:

```
Opens http://localhost:8888 showing bundle composition visually
```

## Test your output

Always test bundled output locally in development mode to catch issues early. Run the built app in a local server. Check browser console for errors. Verify your app works with minified code. Many issues only appear in production mode.

Quick check

**Quiz:** What's a common Webpack pitfall?

- [x] Wrong loader order causing transformation failures.
- [ ] Using too many loaders.
- [ ] Minification is always bad.

*Answer:* Wrong loader order causing transformation failures.. Loader order is critical because they execute right-to-left, and incorrect order breaks the transformation pipeline.