title: Webpack loader not being used when requiring file being processed by custom loader
body: <p>I'm trying to write a custom Webpack loader that reads a JavaScript file and exports SASS variables, similar to <a href="https://github.com/tompascall/js-to-sass-var-loader" rel="nofollow noreferrer">js-to-sass-var-loader</a> but with some added functionality.</p>
  
  <h3>/webpack-loaders/js-to-sass-loader.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>import _ from 'lodash';
  import path from 'path';
  
  const importRegex = /@import\s+'([^']+\.js)'\s*;/ig;
  
  /* 
      functions for transforming...
  */
  
  export default function (content) {
      let self = this;
  
      // search for "@import '*.js';" and replace that text with
      // the transformed output of the specified JavaScript file
      return content.replace(importRegex, (match, relativePath) =&gt; {
          if (match) {
              let modulePath = path.join(self.context, relativePath);
              self.addDependency(modulePath);
              let data = require(modulePath).default;
              return transform(data);
          }
      });
  }
  </code></pre>
  
  <p>This JavaScript file loads a .json config file, does a little processing and spits out an object.</p>
  
  <h3>/client/sass/sassConfig.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>import config from '../../config.json';
  
  console.log('Generating SASS variables.');
  let sass = {
      // some special values here
      };
  
  for (let key of Object.keys(config.style)) {
      sass[key] = config.style[key];
  }
  
  sass.debug = (process.env.NODE_ENV || 'production').trim() === 'development';
  
  export default sass;
  </code></pre>
  
  <p>The json file includes comments, so I'm stripping them away with another trivial loader.  This simply parses the json file using <a href="https://github.com/json5/json5" rel="nofollow noreferrer">json5</a>, then stringifies the output and passes it on.</p>
  
  <h3>/webpack-loaders/remove-json-comments-loader.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>import json5 from 'json5';
  
  export default function (source) {
      return JSON.stringify(json5.parse(source));
  }
  </code></pre>
  
  <p>My webpack.config.babel.js includes rules for sass and json files to use these two loaders.</p>
  
  <h3>/webpack.config.babel.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>// ... imports ...
  
  const webpackConfig = {
      entry: {
          app: './client/script.js',
      },
  
      output: {
          filename: 'script.js',
          path: path.resolve(__dirname, 'public')
      },
  
      resolveLoader: {
          alias: {
              'js-to-sass-loader': path.resolve(__dirname, 'webpack-loaders/js-to-sass-loader'),
              'remove-json-comments-loader': path.resolve(__dirname, 'webpack-loaders/remove-json-comments-loader')
          }
      },
  
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader',
              },
              {
                  test: /\.json$/,
                  exclude: /node_modules/,
                  loader: 'remove-json-comments-loader',
              },
              {
                  test: /\.s[ca]ss$/,
                  exclude: /node_modules/,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: [
                          { loader: 'css-loader' },
                          { loader: 'sass-loader' },
                          { loader: 'js-to-sass-loader' },
                      ]
                  }),
              },
              // ...
          ],
      },
  
      plugins: [
          // ...
          new ExtractTextPlugin({ filename: 'style.css' }),
          // ...
      ],
  
      // ...
  };
  
  module.exports = webpackConfig;
  </code></pre>
  
  <p>In a few of my JavaScript files, I can <code>import Config from './path/to/config.json'</code> with no problem.  It correctly uses the <code>remove-json-comments-loader</code>.  But when my <code>js-to-sass-loader</code> attempts to require <code>sassConfig.js</code>, Webpack doesn't use the loader for parsing <code>config.json</code>.  It attempts to load it as a regular json file, which causes it to fail due to the comments.  I've tried using <code>import config from '!!remove-json-comments-loader!../../config.json';</code> but webpack says it cannot find the file.</p>
  
  <p>I'm super new to writing webpack loaders, so I'm sure it's something simple.  Help?  Thanks!</p>
  
  <p>Here's a link to the github repo: <a href="https://github.com/dfoverdx/PokeStreamer-Tools/tree/9b4c7315d5dc6b30c5972a0b8678489598311bf0" rel="nofollow noreferrer">https://github.com/dfoverdx/PokeStreamer-Tools/tree/9b4c7315d5dc6b30c5972a0b8678489598311bf0</a></p>
  
  <p>To reproduce the issue, open up <code>/node/client/sass/sassConfig.js</code>, and change the first four lines to:</p>
  
  <pre><code>// import json5 from 'json5';
  // import fs from 'fs';
  // const config = json5.parse(fs.readFileSync('config.json'));
  import config from '../../config.json';
  </code></pre>
  
  <p>That is, comment the first 3 lines and uncomment the 4th.</p>
  
  <p>From <code>/node</code> run <code>npm run build</code> to produce the error.</p>