Webpack 3搭配babel-loader加载Bootstrap 4独立JS组件（Windows/Linux对比）

下面是针对你的需求整理后的完整配置和导入方案，确保Bootstrap 4的独立JS组件能被正确转译并打包到项目中：

Webpack 配置文件模块规则 #

首先调整你的Webpack配置，确保babel-loader能处理项目自身JS和Bootstrap的JS文件：

// Support for Individual Bootstrap Component Loading
module: {
  rules: [{
    test: /\.js$/,
    include: [
      `${__dirname}/assets/js/`, // 项目自身JS目录
      `${__dirname}/node_modules/bootstrap/js/` // Bootstrap JS组件目录
    ],
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env', 'stage-2'],
        plugins: ['transform-runtime']
      }
    }
  }]
}

配置关键点说明 #

• 用模板字符串${__dirname}拼接路径比直接加号更清晰，能避免路径拼接时的语法错误
• include数组明确指定需要babel转译的目录，既提升打包效率，又确保Bootstrap的ES6代码被正确处理（Bootstrap 4的JS组件基于ES6编写）
• preset-env会根据你配置的目标环境自动转换ES6+语法，无需手动指定具体ES版本
• stage-2预设支持一些还未纳入标准的ESNext语法特性，适配Bootstrap内部的写法
• transform-runtime插件可以避免babel转译时生成重复的辅助代码，有效减少打包体积

独立组件导入示例 #

在你的项目JS文件中，可以按需导入Bootstrap 4的单个组件，比如只导入下拉菜单和模态框：

/*jshint esversion: 6 */
// Components
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';

// 初始化组件（按需执行）
document.addEventListener('DOMContentLoaded', () => {
  // 初始化所有下拉菜单
  const dropdowns = document.querySelectorAll('.dropdown-toggle');
  dropdowns.forEach(dropdown => new bootstrap.Dropdown(dropdown));
  
  // 初始化特定模态框
  const modal = document.getElementById('exampleModal');
  if (modal) new bootstrap.Modal(modal);
});

导入注意事项 #

• Bootstrap 4的独立组件位于bootstrap/js/dist/目录下，直接导入该目录下的文件即可，无需导入整个bootstrap包
• 注意Bootstrap的JS组件依赖jQuery和Popper.js（部分组件需要），确保这些依赖已经安装并在Webpack中正确处理

内容的提问来源于stack exchange，提问作者mpukit