title: Function in external javascript file called only on reload In react js
body: <p>I have a external js file linked to my html  and bundle.js file generated by webpack linked to html .</p>
  
  <p>In index.html code is</p>
  
  <pre><code>&lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="bundle.min.js"&gt;&lt;/script&gt;`
  </code></pre>
  
  <p>The issue is functions in main.js are called only once on page load in reactjs after running webpack and code is bundled.</p>
  
  <p>main.js file code is </p>
  
  <pre><code>(function () {
  
      'use strict';
  
      var isMobile = {
          Android: function() {
              return navigator.userAgent.match(/Android/i);
          },
              BlackBerry: function() {
              return navigator.userAgent.match(/BlackBerry/i);
          },
              iOS: function() {
              return navigator.userAgent.match(/iPhone|iPad|iPod/i);
          },
              Opera: function() {
              return navigator.userAgent.match(/Opera Mini/i);
          },
              Windows: function() {
              return navigator.userAgent.match(/IEMobile/i);
          },
              any: function() {
              return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
          }
      };
  
      var mobileMenuOutsideClick = function() {
  
          $(document).click(function (e) {
          var container = $("#fh5co-offcanvas, .js-fh5co-nav-toggle");
          if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0) {
  
              if ( $('body').hasClass('offcanvas') ) {
  
                  $('body').removeClass('offcanvas');
                  $('.js-fh5co-nav-toggle').removeClass('active');
  
              }
  
  
          }
          });
  
      };
  
  
      var offcanvasMenu = function() {
  
          $('#page').prepend('&lt;div id="fh5co-offcanvas" /&gt;');
          $('#page').prepend('&lt;a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle fh5co-nav-white"&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;');
          var clone1 = $('.menu-1 &gt; ul').clone();
          $('#fh5co-offcanvas').append(clone1);
          var clone2 = $('.menu-2 &gt; ul').clone();
          $('#fh5co-offcanvas').append(clone2);
  
          $('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
          $('#fh5co-offcanvas')
              .find('li')
              .removeClass('has-dropdown');
  
          // Hover dropdown menu on mobile
          $('.offcanvas-has-dropdown').mouseenter(function(){
              var $this = $(this);
  
              $this
                  .addClass('active')
                  .find('ul')
                  .slideDown(500, 'easeOutExpo');
          }).mouseleave(function(){
  
              var $this = $(this);
              $this
                  .removeClass('active')
                  .find('ul')
                  .slideUp(500, 'easeOutExpo');
          });
  
  
          $(window).resize(function(){
  
              if ( $('body').hasClass('offcanvas') ) {
  
                  $('body').removeClass('offcanvas');
                  $('.js-fh5co-nav-toggle').removeClass('active');
  
              }
          });
      };
  
  
      var burgerMenu = function() {
  
          $('body').on('click', '.js-fh5co-nav-toggle', function(event){
              var $this = $(this);
  
  
              if ( $('body').hasClass('overflow offcanvas') ) {
                  $('body').removeClass('overflow offcanvas');
              } else {
                  $('body').addClass('overflow offcanvas');
              }
              $this.toggleClass('active');
              event.preventDefault();
  
          });
      };
  
      var fullHeight = function() {
  
          if ( !isMobile.any() ) {
              $('.js-fullheight').css('height', $(window).height());
              $(window).resize(function(){
                  $('.js-fullheight').css('height', $(window).height());
              });
          }
  
      };
  
  
  
      var contentWayPoint = function() {
          var i = 0;
          $('.animate-box').waypoint( function( direction ) {
  
              if( direction === 'down' &amp;&amp; !$(this.element).hasClass('animated-fast') ) {
  
                  i++;
  
                  $(this.element).addClass('item-animate');
                  setTimeout(function(){
  
                      $('body .animate-box.item-animate').each(function(k){
                          var el = $(this);
                          setTimeout( function () {
                              var effect = el.data('animate-effect');
                              if ( effect === 'fadeIn') {
                                  el.addClass('fadeIn animated-fast');
                              } else if ( effect === 'fadeInLeft') {
                                  el.addClass('fadeInLeft animated-fast');
                              } else if ( effect === 'fadeInRight') {
                                  el.addClass('fadeInRight animated-fast');
                              } else {
                                  el.addClass('fadeInUp animated-fast');
                              }
  
                              el.removeClass('item-animate');
                          },  k * 200, 'easeInOutExpo' );
                      });
  
                  }, 100);
  
              }
  
          } , { offset: '85%' } );
      };
  
  
      var dropdown = function() {
  
          $('.has-dropdown').mouseenter(function(){
  
              var $this = $(this);
              $this
                  .find('.dropdown')
                  .css('display', 'block')
                  .addClass('animated-fast fadeInUpMenu');
  
          }).mouseleave(function(){
              var $this = $(this);
  
              $this
                  .find('.dropdown')
                  .css('display', 'none')
                  .removeClass('animated-fast fadeInUpMenu');
          });
  
      };
  
  
      var goToTop = function() {
  
          $('.js-gotop').on('click', function(event){
  
              event.preventDefault();
  
              $('html, body').animate({
                  scrollTop: $('html').offset().top
              }, 500, 'easeInOutExpo');
  
              return false;
          });
  
          $(window).scroll(function(){
  
              var $win = $(window);
              if ($win.scrollTop() &gt; 200) {
                  $('.js-top').addClass('active');
              } else {
                  $('.js-top').removeClass('active');
              }
  
          });
  
      };
  
  
      // Loading page
      var loaderPage = function() {
          $(".fh5co-loader").fadeOut("slow");
      };
  
      var counter = function() {
          $('.js-counter').countTo({
               formatter: function (value, options) {
            return value.toFixed(options.decimals);
          },
          });
      };
  
      var counterWayPoint = function() {
          if ($('#fh5co-counter').length &gt; 0 ) {
              $('#fh5co-counter').waypoint( function( direction ) {
  
                  if( direction === 'down' &amp;&amp; !$(this.element).hasClass('animated') ) {
                      setTimeout( counter , 400);
                      $(this.element).addClass('animated');
                  }
              } , { offset: '90%' } );
          }
      };
  
      var parallax = function() {
  
          if ( !isMobile.any() ) {
              $(window).stellar({
                  horizontalScrolling: false,
                  hideDistantElements: false,
                  responsive: true
  
              });
          }
      };
  
      var testimonialCarousel = function(){
  
          var owl = $('.owl-carousel-fullwidth');
          owl.owlCarousel({
              items: 1,
              loop: true,
              margin: 0,
              nav: false,
              dots: true,
              smartSpeed: 800,
              autoHeight: true
          });
      };
  
      var sliderMain = function() {
  
          $('#fh5co-hero .flexslider').flexslider({
              animation: "fade",
              slideshowSpeed: 5000,
              directionNav: true,
              start: function(){
                  setTimeout(function(){
                      $('.slider-text').removeClass('animated fadeInUp');
                      $('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
                  }, 500);
              },
              before: function(){
                  setTimeout(function(){
                      $('.slider-text').removeClass('animated fadeInUp');
                      $('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
                  }, 500);
              }
  
          });
  
          $('#fh5co-hero .flexslider .slides &gt; li').css('height', $(window).height());
          $(window).resize(function(){
              $('#fh5co-hero .flexslider .slides &gt; li').css('height', $(window).height());
          });
  
      };
  
  
      $(function(){
          mobileMenuOutsideClick();
          offcanvasMenu();
          burgerMenu();
          contentWayPoint();
          sliderMain();
          dropdown();
          goToTop();
          loaderPage();
          counterWayPoint();
          counter();
          parallax();
          testimonialCarousel();
          fullHeight();
      });
  
  
  }());
  </code></pre>
  
  <p>I want my code in main.js called always not only on reload. I am using reactjs and webpack.
  Please help me fix this. Thank you.</p>