在 Webpack 2 中添加 Bootstrap 4 模态

Question

我只想使用 bootstrap 模态功能，所以我手动将这些库 (modal.js & util.js) 添加到供应商 webpack.config.js

但是如果我直接添加 vendor.js 就可以了。由于它是捆绑包，我不想直接引用而是需要映射供应商捆绑包 system.config.js

我怎样才能实现它？请建议

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

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

我的HTML

Answer 1

所以我所做的是，

已将 Bootstrap 模态参考从 js/dist/modal 更改为 js/src/modal
在系统配置中，我添加了模态参考
在 main.ts
在 webpack 中添加别名

这样我们就可以只使用 bootstrap 模态功能。希望对你有帮助

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'),
    }
  },

在 Webpack 2 中添加 Bootstrap 4 模态

Adding Bootstrap 4 modal in Webpack 2

javascript

node.js

bootstrap-modal

bootstrap-4

webpack-2