'jquery is not defined' when using webpack to load bootstrap

Question

I am just starting to learn to use Webpack (previously I just use the manual way to include individual scripts separately). And I used bootstrap-loader for load

Answer 1

I want to share my findings for any future developer who might have the same use-case I do.

I had the requirement to only create a vendor bundle and not an app bundle for an AngularJS (1.7.2) app, using Webpack 4 (4.16.4). I think because I was only creating a vendor bundle, none of the other solutions worked. Only expose-loader worked for me, like so:

    // webpack.config.js
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        ]
    }

For more information: https://github.com/webpack-contrib/expose-loader