I'm trying to implement the DataTables example at https://preview.keenthemes.com/metronic8/demo1/documentation/general/datatables/server-side.html into my project. It's not working.

Here are my steps:

1) Added the HTML code from the example into my Blade file.

2) Added the DataTables JS and CSS files.

2) Added the JS code from the example into my page specific JS file at /resources/assets/extended/js/custom/admin/admin.js

I get a "ReferenceError: DataTables is not defined" error.

When I click "view page source", I see all of the required files added.

<script src="https://devsite.local/custom/plugins/global/plugins.bundle.js"></script>
<script src="https://devsite.local/custom/js/scripts.bundle.js"></script>
<script src="https://devsite.local/custom/js/custom/widgets.js"></script>
<script src="https://assetcaster.local/custom/plugins/custom/datatables/datatables.bundle.js"></script>
<script src="https://devsite.local/custom/js/custom/admin/admin.js"></script>

Clicking on the admin.js file to view the source code gives me a massive file where Webpack has added jQuery to it, even though jQuery was already included in plugins.bundle.js

I can't decipher what's going on, as the JS code in Metronic is a huge mess. My questions are:

1) Why is jQuery being added to my custom admin.js script.

2) How do I just get my custom JS scripts to be pushed into the public directory without being modified by Webpack?

3) Why am I getting the "DataTables is not defined" error when DataTables.js is clearly included before my custom script. I assume it's because jQuery was added a second time, but I don't know for sure.