How to use webpack to join JS files?-CodePudding

I have to merge several files from my website with webpack, and for that I need to work with JS modules.

This is a child file.

export default () =>  {
    $('[data-direction]').on('click', switchFeatured)
    function switchFeatured (event) {
        const icon = $(event.currentTarget);
        if (icon.data().direction === 'right') {
            if (featuredCurrent < featuredTotal) {
                featuredCurrent  ;
            }
        } else {
            if (featuredCurrent > 1) {
                featuredCurrent--;
            }
        }
        $('#featured-list').css('left', ( (featuredCurrent - 1) * -100)   '%');
    }
}

This is the main file.

window.$ = require ('jquery')

import Default from './pages/default'
import Home from './pages/home'

Default();
Home();

It's working this way, but is the way I export and use the imported modules correct? Got a better way?

CodePudding user response：

If this work and you're happy with it then go for it.

But when using ES modules it's a little bit more idiomatic to import jquery whenever you use it:

// ./pages/default.js
import $ from 'jquery';

export default () => $(/* ... */);

// ./main.js
import Default from './pages/default'
import Home from './pages/home'

Default();
Home();