how to bundle non mudular javascript file into a file using webpack

Question

I want to bundle a file which is non modular js, it use jquery, register a method on $.fn, so this js must behind jquery after bundled.

this js file like

(function($){
     $.fn.splitPane = ...
}(JQuery)

complete code split-pane.js

all relative file I think will be useful to solve this problem. https://gist.github.com/iamwwc/4e048d8669c332cecee2233f850c69d4

my project path:

/root
    /dist/public/assets/js/main.js  #it's bundled result file.
    /src/main.ts
    /vendor/split-pane.js
package.json
tsconfig.json
webpack.config.js

I think in result main.js, ideal order is jquery => split-pane => main.ts. I use raw-loader to load split-pane after jquery, but not working.

please help me.. I used Google, stackoverflow, webpack docs and lots of methods to solve this problem, but all are not working. I'm tired.

finally, forgive my bad English.

Answer 1

At the top of split-pane.js, add var jQuery = require('jquery') . Then do require('./vendor/split-pane.js') when you want to use it.