How to debug webpack?

@mallory_cormier 

Debugging webpack can be done in several ways. Here are some approaches you can follow:

1. Use the --debug flag: When running webpack from the command line, you can add the --debug flag to get more detailed information about the build process. This will display more verbose output, including details about modules, loaders, and dependencies.
2. Enable source mapping: Source maps are files that map the transformed code back to the original source code, making it easier to debug. You can set the devtool option in your webpack configuration to generate source maps. Common options include source-map, cheap-module-source-map, and eval-source-map. Choose the one that best suits your needs.
3. Inspect the webpack output: Look closely at the output generated by webpack in the console. It provides valuable information about the build process, including any errors or warnings encountered. This can help you identify issues and trace them back to their source.
4. Use the webpack-bundle-analyzer plugin: This plugin helps you visualize and analyze your bundle size. It generates an interactive zoomable treemap showing the size of each module. You can use it to identify large or duplicated modules that may be causing performance issues.
5. Use browser's developer tools: If webpack is generating code for the browser, you can utilize the built-in developer tools of your browser to debug the code. You can set breakpoints, inspect variables, and step through the code to identify and fix issues.
6. Check your webpack configuration: Verify that your webpack configuration is set up correctly. Double-check the entry and output paths, loaders, plugins, and other settings. One misconfiguration can lead to unexpected behavior or errors.
7. Use debugger statements: Insert debugger; statements in your source code to pause execution at specific points. This can be useful to inspect the state of variables and troubleshoot problems.
8. Use console.log or console.debug: Insert console.log or console.debug statements in your source code to print out variable values, execution flow, or other relevant information. This can help you understand what is happening and track down the issue.

By following these approaches, you should be able to effectively debug your webpack configuration and resolve any issues.