在 jQuery 和 Bootstrap 4 中使用 Webpack

Question

I feel like there should be a straight-up example of this somewhere online. Unfortunately, I've been unsuccessful in finding one. In short, I'm importing Bootstrap 4 via Yarn. One of the dependencies of Bootstrap 4 is jQuery. These two dependencies will be used on all pages in my app. For that reason, I wanted to bundle them together via Webpack. Currently, I have the following:

app.js

// Import jQuery
const $ = require('jquery');

// Import Bootstrap
require('bootstrap/dist/css/bootstrap.min.css');

Then, in my webpack.config.js file, I have the following:

webpack.config.js

"use strict";

const path = require('path');

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/js/app.js',
    },
    plugins: [
        new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery' }),
        new webpack.optimize.CommonsChunkPlugin({ name: 'common' }),
        new webpack.optimize.UglifyJsPlugin()
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/dist/js/'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
        ]
    },
}

However, when I visit a webpack in my page, I see the following error:

Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: $ is not defined

How do I bundle jQuery and Bootstrap in my app via Webpack?

Answer 1

As @rick-van-osta pointed out: you don't need to require jquery since you already loaded it via the provide plugin (this will create the global variable $ ):

new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery' }),

remove the line const $ = require('jquery'); from your app.js and you should be good to go.

there is a webpack entry in the bootstrap documentation btw

also since you are using node_modules, you should be able to change your app.js to:

require('bootstrap');