title: How to use helpers in handlebars with webpack(handlebars-loader)
body: <p>I am using Handlebars in my project and bundling templates using webpack. I am using <code>handlebars-loader</code> to compile templates. I got issue  when I created a small helper. Webpack shows this error when I use helper in my template:</p>
  
  <pre><code>You specified knownHelpersOnly, but used the unknown helper withCurrentItem - 5:4
  </code></pre>
  
  <p>This is my code:</p>
  
  <p><strong>Webapck:</strong></p>
  
  <pre><code>{
          test   : /\.(tpl|hbs)$/,
          loader : "handlebars-loader?helperDirs[]=" + __dirname + "templates/helpers"
          // use    : 'handlebars-loader?helperDirs[]=false' + __dirname + 'templates/helpers'
  },
  </code></pre>
  
  <p><strong>Helper(project/templates/helpers/withCurrentItem.js):</strong></p>
  
  <pre><code>export default function (context, options) {
    const contextWithCurrentItem = context
  
    contextWithCurrentItem.currentItem = options.hash.currentItem
  
    return options.fn(contextWithCurrentItem)
  }
  </code></pre>
  
  <p><strong>Template file(project/templates/products.tpl):</strong></p>
  
  <pre><code>{{&gt; partials/filters}}
  &lt;ul class="u-4-5"&gt;
    {{#each data.products}}
      {{&gt; partials/product}}
      {{withCurrentItem ../styles currentItem=this}}
    {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried to resolve the problem and searched over the internet but I couldn't find any thing. This is what I have tried to:</p>
  
  <ul>
  <li><p>Add <code>helperDirs[]</code> query param to loader as:</p>
  
  <p>loader : "handlebars-loader?helperDirs[]=" + __dirname + "templates/helpers"</p></li>
  <li><p>Add helpers directory path to <code>resolve.modules</code> property of webpack config file</p></li>
  </ul>
  
  <p>Sadly, none of them work.</p>