title: Adding Bootstrap 4 modal in Webpack 2
body: <p>I wanted to use only bootstrap modal functionality, so i've manually added those libs (modal.js &amp; util.js) to vendor in webpack.config.js </p>
  
  <p>But if i directly add the vendor.js it works. Since it is bundle i don't want to refer directly instead i need to map the vendor bundle though system.config.js </p>
  
  <p>How can i achieve it ? please suggest </p>
  
  <p><strong>My webpack.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import path from 'path'
  import webpack from 'webpack'
  
  export default [{
      devtool: 'inline-source-map',
      entry: {
        vendor: ['jquery', '/node_modules/bootstrap/js/dist/util', '/node_modules/bootstrap/js/dist/modal'],
        main: path.resolve(__dirname, 'ui.apps/src/main/content/jcr_root/etc/clientlibssrc/shared/js/main'),
        globalNavigation: path.resolve(__dirname, 'ui.apps/src/main/content/jcr_root/etc/clientlibssrc/modules/global-navigation/js/index'),
      },
      output: {
        path: path.resolve(__dirname, 'ui.apps/src/main/content/jcr_root/etc/clientlibsdist/js-bundle'),
        filename: '[name].js'
      },
      target: 'web',
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor'
        }),
        new webpack.optimize.UglifyJsPlugin({
          comments: false
        })
      ],
      resolve: {
        extensions: ['.js', '.es6', '.ts']
      },
      module: {
        loaders: [{
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader']
        }, {
          test: /\.es6$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }, {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: 'ts-loader'
        }]
      }
    },
    {
      devtool: 'inline-source-map',
      entry: {
        'external-global-navigation': [path.resolve(__dirname, 'ui.apps/src/main/content/jcr_root/etc/clientlibssrc/modules/global-navigation/js/index')]
      },
      output: {
        path: path.resolve(__dirname, 'ui.apps/src/main/content/jcr_root/etc/clientlibsdist/js-bundle'),
        filename: '[name].js'
      },
      target: 'web',
      externals: {
        'jquery': 'jQuery'
      },
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'external-global-navigation'
        }),
        new webpack.optimize.UglifyJsPlugin({
          comments: false
        })
      ],
      resolve: {
        extensions: ['.js', '.es6', '.ts']
      },
      module: {
        loaders: [{
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader']
        }, {
          test: /\.es6$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }, {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: 'ts-loader'
        }]
      }
    }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My System.config.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>System.config({
    baseURL: '/',
    transpiler: 'ts',
    meta: {
      typescript: {
        exports: 'ts'
      }
    },
    map: {
      jquery: '/node_modules/jquery/dist/jquery.js',
      ts: '/node_modules/plugin-typescript/lib/plugin.js',
      typescript: '/node_modules/typescript/lib/typescript.js',
    },
    packages: {
      'static/clientlibs/src/shared/js': {
        defaultExtension: 'ts'
      },
      'static/clientlibs/src/modules/': {
        defaultExtension: 'ts',
        meta: {
          "*.ts": {
            "loader": "ts"
          }
        }
      }
    }
  });
  System.import('/static/clientlibs/src/shared/js/main');</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My HTML</strong>
  <a href="https://i.stack.imgur.com/NKkBb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NKkBb.png" alt="enter image description here"></a></p>