How do I bundle with webpack?

I have a site that already have jquery 1.7 loaded.

I want to bundle my dependencies with webpack.

I’m tried

import “select2” require “select2”

my webpack config looks like this:

module.exports = {
    mode: "development",
    entry: {
        frb: "./src/app/loader.js"
    },
    output: {
        path: path.resolve(__dirname, "./src/lib"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            // { parser: { amd: false } },
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: "babel-loader",
                query: {
                    presets: [
                        [
                            "@babel/preset-env",
                            {
                                targets: {
                                    chrome: "58",
                                    ie: "9"
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    externals: {
        $: "jquery",
        jQuery: "jquery"
    },

    plugins: [
        // Ignore all locale files of moment.js
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

I just keep getting : TypeError: $(...).select2 is not a function

Am I missing something?

[chlorophyllkid]

Maybe it would be an improvement to the documentation to add an up to date version of the installation. People will answer this question a lot, since there is no common example.

[gricey432]

I managed to get this to work in Typescript + webpack kind of (though I’m not sure if it’s the right approach).

dropdown.ts

/// <reference path="@types/select2-module.d.ts" />
import * as $ from 'jquery';
// TODO this works but I'm not sure how to get the types right
// @ts-ignore
import * as select2 from "select2";

import "select2/dist/css/select2.css";
import "select2-bootstrap-theme/dist/select2-bootstrap.css";

// Hook up select2 to jquery
select2($);

@types/select2-module.d.ts

declare module 'select2' {
    function select2($: JQueryStatic): void;
    export = select2;
}

I also had to remove the dependency on requirejs from the DefinitelyTyped types because it conflicted with another require type, but that’s kind of specific to my project I think.

Hopefully a similar approach helps with other non-typescript webpack bundling. I think the important part might be to explicitly bind with the select2($).