title: How to import only the one component from bootstrap 4 via webpack 2
body: <p>I am working with Webpack 2 and Bootstrap 4. I want to use only one Modal component from the whole package.</p>
  
  <p>Is it possible? I tried to import it from js/dist/modal but I got an exception about: <strong>Can't resolve exports in bootstrap</strong></p>
  
  <p>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. </p>
  
  <p>HEre is my webpack.common.js</p>
  
  <pre><code>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 = () =&gt; {
      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 = () =&gt; {
      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&amp;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&amp;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"
              }
          })
  
      ],
  
  
  };
  </code></pre>
  
  <p>And here is how I tried to use it
  App.component.js</p>
  
  <pre><code>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
  </code></pre>