Adding Bootstrap 4 modal in Webpack 2

Question

I wanted to use only bootstrap modal functionality, so i've manually added those libs (modal.js & util.js) to vendor in webpack.config.js

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

How can i achieve it ? please suggest

My webpack.config.js

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'
      }]
    }
  }
]

My System.config.js

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');

My HTML

Answer 1

So What i've done is,

1. Changed Bootstrap modal reference from js/dist/modal to js/src/modal
2. In system config, i've add the modal reference
3. Import modal in main.ts
4. Add alias in webpack

By doing so we can use only bootstrap modal functionality. Hope it helps

System.config.js

map: {
  jquery: '/node_modules/jquery/dist/jquery.js',
  ts: '/node_modules/plugin-typescript/lib/plugin.js',
  typescript: '/node_modules/typescript/lib/typescript.js',
  modal: '/node_modules/bootstrap/js/src/modal.js'
}

main.ts

import 'modal';

webpack.config.js

//Update Vendor
vendor: ['jquery', 'modal'],

  resolve: {
    extensions: ['.js', '.es6', '.ts'],
    alias: {
      modal: path.resolve(__dirname, 'node_modules/bootstrap/js/src/modal'),
    }
  },