title: How to use fancybox with webpack?
body: <p>I'm currently developing a webpage and started using webpack in my build process. I've managed to use slick-carrousel plugin downloaded via npm but can't make fancybox to work!</p>
  
  <p>I've downloaded it via npm and imported it as stated in the <a href="https://www.npmjs.com/package/fancybox" rel="noreferrer">documentation</a>:</p>
  
  <pre><code>var $ = require("jquery");
  var slick = require("slick-carousel");
  var fancybox = require("fancybox")($);
  </code></pre>
  
  <p>Then in my code I try to initailize a fancybox object and nothing happens. It throws no errors at all.</p>
  
  <pre><code>$(".filtros__filtrar").on('click', function() {    
    $.fancybox.open({
      src  : '#tns-filtros',
      type : 'inline',
      opts : {
        smallBtn: false
      }
    });
  });
  </code></pre>
  
  <p>If I do a console log of those variables I get:</p>
  
  <pre><code>console.log(fancybox);  -&gt;  undefined
  console.log(slick);     -&gt;  {}
  </code></pre>
  
  <p>Which means slick module is loading correctly but not fancybox.</p>
  
  <p><a href="http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/" rel="noreferrer">Somewhere</a> I read that you have to use imports-loader to make fancybox recognize jquery variables. So I downloaded it via npm and included this in my webpack.config file:</p>
  
  <pre><code>module: {
    rules: [
      {
        test: /fancybox[\/\\]dist[\/\\]js[\/\\]jquery.fancybox.cjs.js/,
        use: "imports-loader?jQuery=jquery,$=jquery,this=&gt;window"
      }
    ]
  }
  </code></pre>
  
  <p>But it doesn't work either.</p>
  
  <p>Can someone give me a light on this subject? Thanks in advance!</p>