title: What's the purpose of using require.resolve in Webpack config rules?
body: <p>So I was checking the webpack config file generated by create-react-app, when I noticed that when specifying the loaders to use, it uses <code>require.resolve()</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/SQdc4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SQdc4.png" alt="enter image description here"></a></p>
  
  <p>Before I always put the loader name directly like this:
  <a href="https://i.stack.imgur.com/FggGd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FggGd.png" alt="enter image description here"></a></p>
  
  <p>According to the documentation <code>require.resolve()</code> gets the id and compiles it to the path of the module. But still, I'm not sure what exactly is the difference between these two approaches, since they both work. Is it because CRP wraps the config files in a single folder so it is required to resolve the path of the module? Or are there any other reasons?</p>