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 thesource.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?