ReferenceError problem when using webpack bundling

ReferenceError problem when using webpack bundling

  • I have a referencing problem (index):158 Uncaught ReferenceError
  • I have one source.js file
  • I use npm to install dependencies
  • With webpack I build one main.js from the source.js
  • I reference main.js in my master HTML template
  • main.js will get loaded from all my HTML in this project
  • I install a package, npm install --save-dev email-obfuscate
  • I import it in my source.js: import EmailObfuscate from 'email-obfuscate';
  • I can initiate the package in my source.js
// global initiation in source.js -> main.js
var el = document.getElementById('cntct');
EmailObfuscate(el, {
    name: 'contact',
    domain: 'domain',
    tld: 'eu',
    altText: 'Email'
});
  • Now it will transform a <p id="cntct"></p> into the obfuscated version on every page
  • Problem: I want to the EmailObfuscate script only on certain pages
  • For this I need to initiate it in the single page not globally in main.js
  • I removed the global initiation from source.js and tried to initiate in single HTML
<!-- contact.html -->
<head>
   <script src="main.js">
      <script>
      var el = document.getElementById('cntct');
      EmailObfuscate(el, {
          name: 'contact',
          domain: 'domain',
          tld: 'eu',
          altText: 'Email'
      });
   </script>
</head>
  • This gives me the reference error: (index):158 Uncaught ReferenceError

How can I initiate my package within the single HTML and not globally?