title: How to handle the require syntax in custom loader of webpack
body: <p>I am encountering a problem with handling the 'require' syntax in webpack's custom loader.
  I have an src fold and a dist fold, use pug to transform an HTML file by webpack from src to dist, and I need to require a json file in my pug file like this,</p>
  
  <pre><code>html(lang="en")
    head
     meta(name="mobile-web-app-capable" content="yes")
     link(rel="manifest", href=require("../manifest.json"))
  </code></pre>
  
  <p>and inside the json file, I need require an image file, like this,</p>
  
  <pre><code>{
    "name": "Webm Maker",
    "display": "fullscreen",
    "orientation": "landscape",
    "short_name": "Webm Maker",
    "icons": [{
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    }]
  }
  </code></pre>
  
  <p>I used file-loader to create a json file to dist directly, but it was irrational, it couldn't resolve the src route in the json file.
  Then I tried to use a custom format file to resolve the src problem like this:</p>
  
  <pre><code>html(lang="en")
    head
      meta(name="mobile-web-app-capable" content="yes")
      link(rel="manifest", href=require("../manifest.prejson"))
  </code></pre>
  
  <p>then, I set the webpack like this</p>
  
  <pre><code>...
  {
     test: /\.prejson$/i,
     use: [{
       loader: 'file-loader'
     }, {
       loader: path.join(__dirname, 'utils', 'prejson-to-json.js'),
     }]
  }
  ...
  </code></pre>
  
  <p>And the custom format file manifest.prejson</p>
  
  <pre><code>-{
      name: "Webm Maker",
      display: "fullscreen",
      orientation: "landscape",
      short_name: "Webm Maker",
      icons: [{
          src: require("./images/images.jpeg"),
          sizes: "48x48",
          type: "image/png"
      }]
   }
  </code></pre>
  
  <p>At this time, file-loader resolved the image route and generated an image file in the dist fold. However, I don't know how to handle the require syntax in the .prejson file, in the custom loader js file 'prejson-to-json.js', I coded like this, </p>
  
  <pre><code>module.exports = function (source, map) {
    console.log('source', source);
    this.callback(null, source, map);
    return source;
  };
  </code></pre>
  
  <p>the image src route was still like 'require(...)';
  So how can I resolve it let the output can replace the require syntax with a correct route that points at the dist image file?</p>