title: webpack 4 - fileloader not working
body: <p>[webpack.config.js]</p>
  
  <pre><code>test: /\.(png|jpg|jpeg|gif)$/,
  use: [
      {
          loader: 'file-loader',
          options: {
              name: 'img/[name].[hash:10].[ext]',
          }
      }
  ]
  </code></pre>
  
  <p>[in frontend code(MainPage.jsx)]</p>
  
  <pre><code>let imgURL = require('../../../assets/mars.png')    
  console.log(imgURL)
  &lt;CardMedia
      className={classes.media}
      image={imgURL}
      title="Contemplative Reptile"
  /&gt;
  // &lt;CardMedia&gt; is material-ui component
  </code></pre>
  
  <p>log :</p>
  
  <pre><code>img/mars.ed66029dc3.png
  Failed to load resource: net::ERR_FILE_NOT_FOUND   mars.ed66029dc3.png
  </code></pre>
  
  <p>mouse hover message mars.ed66029dc3.png: <br>
  D:/projectname/build/html/img/mars.ed66029dc3.png <br>
  I need output is D:/projectname/build/img/mars.ed66029dc3.png</p>
  
  <p>[project structure]</p>
  
  <pre><code>build
    - html
      index.html (electron entrance)
    - img
      mars.ed66029dc3.png (file-loader copy)
    bundle.js (webpack output file, call by index.html)
  src
    - assets
      mars.png
    - core
    - render
      - html
        index.html
      - js
        - components
          MainPage.jsx
  </code></pre>
  
  <p>How can it fix it? use publicPath not working too, <br>
  And I don't know how to unify all path,<br>
  in html - I use electron protocol<br>
  in jsx - import &amp; require I use webpack alias<br>
  in jsx img - I use file-loader ....<br>
  <br>
  please help, thanks  </p>