twitter-bootstrap – 如何通过webpack 2从bootstrap 4中仅导入

可能吗？我试图从js / dist / modal导入它,但我有一个例外：无法在bootstrap中解析导出

目前我提供了类似供应商依赖的引导程序,但我的供应商文件非常大(350 kb).我想只捆绑我正在使用的组件.

HEre是我的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"
            }
        })

    ],};

以下是我尝试使用它的方法
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