How to load external JS libraries for the whole project
<p>How do you load an external library so that it is available all over the project?Say for example I have the below:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
    &lt;title&gt;Starter Template for Bootstrap&lt;/title&gt;
    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="../public/css/bootstrap.css" rel="stylesheet"&gt;
    &lt;!-- Font Awesome core CSS --&gt;
    &lt;link href="../public/css/font-awesome.css" rel="stylesheet"&gt;
    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="../public/css/style.css" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;p&gt;This is a test&lt;/p&gt;

    &lt;!-- Bootstrap core JavaScript--&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;window.jQuery || document.write('&lt;script src="../../assets/js/vendor/jquery.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
    &lt;script src="../jsLib/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>So this includes the jQuery, Bootstrap, font-awesome and my personal stylesheet as you can see.</p>

<p>Question: What if someone goes to another page in my site for instance: /profileSettings.html</p>

<p>Will I have to load all the libraries again?</p>

<p>Sorry if this is a simple question but I am completely new to front-end development.</p>

<p>Thanks in advance</p>