webpack项目如何将独立配置JS文件导入至入口主JS文件

webpack默认遵循ES模块/CommonJS模块规范，你当前的配置文件没有做导出声明，也没有在入口文件引入执行，所以逻辑不会生效，可参考以下两种方案实现导入：

方案1：直接导入执行（无参数依赖时使用） #

如果你的配置文件逻辑不需要入口文件传入参数，直接运行即可，只需要做一步操作：

• 假设你的配置文件名为menuConfig.js，和主入口JS文件处于同一目录，在主入口JS顶部添加导入语句：
  import './menuConfig.js'

注意：该方案需要保证JS加载时页面.burger元素已经渲染完成，可将JS引入标签放在</body>之前，避免DOM未加载导致burger变量为null报错。

方案2：封装函数导出（更灵活，推荐） #

可以将配置逻辑封装为可调用的函数，手动控制执行时机，规避DOM加载顺序问题：

1. 修改配置文件menuConfig.js代码：

// 导出菜单初始化函数
export function initMenu() {
  const burger = document.querySelector('.burger')
  // 元素不存在时直接返回，避免报错
  if (!burger) return
  const menuIsActive = false

  function menuOpen() {
    burger.classList.toggle('burger--active')
  }

  burger.addEventListener('click', menuOpen)
}

2. 在主入口JS文件中导入并在DOM加载完成后调用：

import { initMenu } from './menuConfig.js'

// 等待DOM完全渲染后执行初始化
document.addEventListener('DOMContentLoaded', () => {
  initMenu()
})

补充说明 #

• 导入时要填写正确的相对路径，如果配置文件在子目录比如src/config/menuConfig.js，要对应修改导入路径，例如import { initMenu } from './config/menuConfig.js'
• 如果你使用CommonJS规范，将导出语句改为module.exports = { initMenu }，导入语句改为const { initMenu } = require('./menuConfig.js')即可。

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