How to import only the one component from bootstrap 4 via webpack 2

Question

I am working with Webpack 2 and Bootstrap 4. I want to use only one Modal component from the whole package.

Is it possible? I tried to import it from js/dist/modal but I got an exception about: Can't resolve exports in bootstrap

Currently I provided bootstrap like vendor dependency, but my vendor file is so big (350 kb). I want to bundle only that component that I am using.

HEre is my webpack.common.js

let process = require("process"),
    path = require("path"),
    webpack = require("webpack"),
    helpers = require("./helpers"),
    glob = require("glob"),

    poststylus = require('poststylus'),

    HtmlWebpackPlugin = require("html-webpack-plugin"),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    CopyWebpackPlugin = require("copy-webpack-plugin"),

    SpritesmithPlugin = require('webpack-spritesmith'),

    srcName = "src";

const getEntry = () => {
    let res = [
        helpers.root(srcName, "index.js")
    ];

    if (process.env.NODE_ENV === "development") {
        res = [
            'react-hot-loader/patch',
            'webpack-dev-server/client?http://localhost:5000',
            'webpack/hot/only-dev-server'
        ].concat(res);
    }

    return res;
};

const getStylLoader = () => {
    let res = {
        test: /\.styl$/,
        exclude: /node_modules/,
        loader: "style-loader!css-loader?modules=false!stylus-loader"
    };

    if (process.env.NODE_ENV === "production") {
        res = Object.assign({}, res, {loader: ExtractTextPlugin.extract({
                                                                                    fallbackLoader: "style-loader",
                                                                                    loader: "css-loader?modules=false&minimize=true!stylus-loader"
                                                                                })
        })
    }

    return res;

};


module.exports = {
    entry : {
        "vendor" : ["react", "react-dom", "react-router", "redux", "react-router-redux", "jquery", "bootstrap/dist/js/bootstrap.min.js"],
        "app" : getEntry()
    },

    context : helpers.root(srcName),

    resolve : {

        modules : [
            "web_modules",
            "node_modules",
            "spritesmith-generated",
            helpers.root(srcName)
        ],

        extensions: ['.js', '.styl', '.css']

    },

    module : {
        rules : [
            {
                enforce : 'pre',
                test : /\.jsx?$/,
                loader : 'eslint-loader',
                options : {
                    fix : true,
                },
                include : helpers.root(srcName),
                exclude: helpers.root(srcName, "routes.js")
            },
            {
                test : /\.jsx?$/,
                loaders : [
                    'babel-loader',
                ],
                include: [ helpers.root(srcName), "node_modules/bootstrap"],
                exclude : /node_modules/
            },
            {
                test : /\.css$/,
                loaders : [
                    'style-loader',
                    'css-loader?modules=true&minimize=true',
                ],
            },
            getStylLoader(),
            {test: /\.png$/, loaders: [
                'file-loader?name=i/[hash].[ext]'
            ]},
            {
                test: /\.svg$/,
                loader: 'babel-loader!svg-react-loader'
            }
        ],
    },
    plugins : [


        new webpack.ProvidePlugin({
            jQuery : "jquery",
            $ : "jquery",
            jquery : "jquery",
            Tether: "tether",
            "window.Tether": "tether",
            Alert: "exports?Alert!bootstrap/js/dist/alert",
            Button: "exports?Button!bootstrap/js/dist/button",
            Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
            Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
            Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports?Modal!bootstrap/js/dist/modal",
            Popover: "exports?Popover!bootstrap/js/dist/popover",
            Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
            Tab: "exports?Tab!bootstrap/js/dist/tab",
            Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
            Util: "exports?Util!bootstrap/js/dist/util"
        }),

        new webpack.LoaderOptionsPlugin({
            options : {
                context: helpers.root(srcName),
                output: { path :  "./" },

                stylus: {
                    use: [poststylus([ 'autoprefixer' ])]
                },

                eslint : {
                    configFile : '.eslintrc',
                    failOnWarning : false,
                    failOnError : false
                }
            }
        }),



        new SpritesmithPlugin({
            src: {
                cwd: helpers.root(srcName, "assets/images/icons"),
                glob: '*.png'
            },
            target: {
                image: helpers.root(srcName, "assets/images/spritesmith_generated/sprite.png"),
                css: helpers.root(srcName, 'assets/images/spritesmith_generated/sprite.styl')
            },
            apiOptions: {
                cssImageRef: "../images/spritesmith_generated/sprite.png"
            }
        })

    ],


};

And here is how I tried to use it App.component.js

const a = require("bootstrap/js/dist/modal");

console.log(a); //I want to pass some jquery element later for Modal and handle it if the exported function will be exist

Answer 1

At this stage it looks like Javascript modules are not supported. This issue appears to be tracking the issue though:

https://github.com/twbs/bootstrap/issues/19017