1

I want to run the simpleWeather jQuery Plugin in the browser by using the npm module. I heard that I need to use a bundler, so I installed Webpack.

This is the folder structure:

  • Weather
    • js
      • index.js
    • node_modules
      • jquery
      • simpleweather
    • index.html
    • package.json
    • webpack.config.js

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>simpleWeather.minimum.js</title>
    <style>
    </style>
</head>
<body>
    <div id="weather"></div>
    <script src="js/bundle.js"></script>
</body>
</html>

index.js:

$(document).ready(function() {
  $.simpleWeather({
    location: 'Austin, TX',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>';

      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

webpack.config.js:

module.exports = {
  entry: "./js/index.js",
  output: {
    filename: "js/bundle.js"
  }
}

This does not work in the browser, I guess, I need to configure Webpack in some different way.

What do I need to do?

user371
  • 21
  • 6

1 Answers1

0

You need to import your node package dependencies [jquery, simpleweather] in index.js and do webpack build to generate bundle.js

Now loading jQuery in webpack is a bit tricky, so so can refer this answer : https://stackoverflow.com/a/28989476/1681972

Community
  • 1
  • 1
Ravi Roshan
  • 1,177
  • 2
  • 11
  • 28