如果包含在多个端点中，则与Webpack捆绑在一起的Bootstrap 5不起作用

编程问答 2022-08-15

问题描述

这是我创建的快速回购邮件，用于演示问题：https://github.com/Simpleqode/bootstrap-5-webpack-test。

基本上，我有一个简单的webpack配置文件，其中有两个端点，其中一个端点导入整个Bootstrap，而第二个端点仅导入Dropdown组件，以便以后做一些魔术。我已经安装了Split Chunks插件，将共享代码移动到一个单独的文件中（尽管即使禁用了Split Chunks插件，问题仍然存在）。

index.js：

import 'bootstrap';

dropdown.js：

import { Dropdown } from 'bootstrap';

webpack.config.js：

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',dropdown: './src/dropdown.js'
  },output: {
    filename: '[name].js',path: path.resolve(__dirname,'dist'),},optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'
        }
      }
    }
  }
};

如果您尝试运行npm run build来编译文件，然后在您喜欢的浏览器中打开index.html，则会注意到下拉组件不起作用。现在，尝试从import { Dropdown } from 'bootstrap';中删除dropdown.js或从import 'bootstrap';中删除index.js并重新编译文件-一切都会像超级按钮一样工作。我是Webpack的新手，Bootstrap 5仍然是Alpha版，因此我正在努力了解Bootstrap还是Webpack是我做错了什么。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascripttwitter-bootstrapwebpackwebpackwebpack