Webpack packaging mechanism and debugging optimization

Webpack is a de-facto standard packaging tool for large frontend projects. Many people use it, but most people use it as a black box—you put the file somewhere, write some magical words in the configuration file, and then witness miracles. How does the packaging mechanism of Webpack work? How do different configuration items affect the output results? How to debug and optimize the packaging process? Let me solve those puzzles.