CODEWITHSUNDEEP
javascriptwebpack
Rob D
Rob D

Reputation: 33

Webpack - Issue with importing generic file into a large codebase

I have a file called 'third_party.js' which is shown below. I would like to have this brought into an existing webpack app (not by using imports or requires in my codebase - but webpack only). As you can see, the IIFE needs window and $ for this to work. I have many .btns in my app that can be clicked on and was hoping there was an easy way to handle this from a global level.

third_party.js

(function (window, $) {

  $(function () {
    $('.btn').on('click', function (event) {
      event.preventDefault();
      console.log("button was clicked");
    });
  });

})(window, jQuery);

Upvotes: 0

Views: 91

Answers (1)

tgallacher
tgallacher

Reputation: 1682

You can add this file into the entry of your Webpack.

For example: 

module.exports = {
    entry: [
        '/path/to/third_party.js',
        'path/to/original/file.js'
    ],
    output: {
        path: 'path/to/output/dir',
        name: 'bundle.js'
    },
    ...
};

Make sure you have jQuery loaded in a script tag on the page before you include the Webpack bundle file (your Webpack output).

Something like: 

<script src="cdn.com/jquery.min.js"></script>
<script src="path/to/output/dir/bundle.js"></script>

Upvotes: 1

Related Questions