I'm updating a web application that I built. Changes that I make to my HTML and CSS display on the DOM. However, when I try to make changes in my JS files, they don't show on the DOM. I tested this using a console.log and it still didn't show in the chrome dev console. I'm using import/export rather than script tags to connect my js files. If needed, I'm happy to upload my code. Thank you in advance.
Here's the HTML. I used Webpack to bundle the code. It's connected via the 'bundle.js' script.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Franklin:wght@300&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>remoteUp</title>
<link rel="icon" type="image/ico" href="/dist/img/favicon/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<img src="/remotetechjobs/dist/img/logo.png">
<div class="header_text">
<h1 class="header_name">remoteUp</h1>
<h2 class="header_subname">work in tech from anywhere</h2>
</div>
<form class="search">
<input class="search__field" placeholder="Search thousands of jobs ..." />
</form>
<div class="likes">
<h2 class="likes_heading"><i>Liked Jobs</i></h2>
<div class="likes__field">
<svg class="likes__icon"><use href="img/icons.svg#icon-heart"></use></svg>
</div>
<div class="likes__panel"><ul class="likes__list"></ul></div>
</div>
</header>
<div class="results">
<br />
<ul class="results__list"></ul>
<div class="results__pages"></div>
</div>
<div class="job"></div>
</div>
<footer>
<div class="copyright">Copyright 2020 © Dylan Yudis <br> Powered by Github Jobs</div>
<div class="icon-bar">
<a href="https://github.com/dyudis314" target="_blank" class="github"><i class="fa fa-github"></i></a> <a href="https://www.linkedin.com/in/dylanyudis/" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="mailto:[email protected]" target="_blank" class="google"><i class="fa fa-google"></i></a>
</div>
</footer>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="js/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- Auto typing in search bar -->
<script>
const options = {
strings:
[
'^750software engineer',
'^1000junior dev',
'^1000QA',
'^1000C#',
'^1000data engineer',
'^1000react native',
'^1000frontend dev'
],
typeSpeed: 60,
backSpeed: 60,
loop: true,
};
const typed = new Typed('.search__field', options);
/* document.querySelector(".search__field").addEventListener("click", function() {
typed[0].stop(true);
});*/
</script>
</body>
</html>`