I am trying to bundle a non-modular JS file that uses jQuery and registers a method on $.fn. This JS must be placed behind jQuery after bundling.
Here is an example of the structure of this JS file:
(function($){
$.fn.splitPane = ...
}(JQuery)
If you want to check out the complete code for split-pane.js, you can find it here.
All related files that may help solve this issue are available in this gist: https://gist.github.com/iamwwc/4e048d8669c332cecee2233f850c69d4
The project directory looks like this:
/root
/dist/public/assets/js/main.js #this is the bundled result file.
/src/main.ts
/vendor/split-pane.js
package.json
tsconfig.json
webpack.config.js
In the resulting main.js file, the ideal order should be jQuery => split-pane => main.ts. I have tried using raw-loader to load split-pane after jQuery, but it's not working as expected.
I have searched through Google, StackOverflow, webpack docs, and tried various methods to solve this problem, but none seem to work. I'm feeling quite frustrated at this point.
Please help me with this situation. Thank you for your understanding, I apologize for any mistakes in my English writing.