Loading and compiling files for your bundle are probably the most important capabilities of Webpack. Interestingly, Webpack doesn't directly process your files once they're loaded. Instead, it coordinates I/O as it passes through Webpack loader plugins. For example, the Webpack configuration used by react-scripts uses the following loader plugins:

• Babel: The Babel loader transpiles the JavaScript in your application's source files into JavaScript that all browsers will understand. Babel will also take care of compiling your JSX syntax into regular JavaScript.
• CSS: There are a couple loaders used by react-scripts that result in CSS output:
  • style-loader: Import CSS modules like JavaScript modules using the import syntax.
  • postcss-loader: Enhanced CSS features like modules, functions, and custom properties.
• Images: Images that are imported by JavaScript or CSS are bundled using url-loader.

As your application matures, you might find yourself needing to load and bundle different types of assets that fall outside of the default react-scripts configuration. Since you don't need to worry about this at the beginning of your project, there's no point in wasting time configuring Webpack loaders.