Webpack配置转ES6模块后部分相对路径import语句失效报错求助

你遇到的核心问题是cjs-to-es6工具没有正确转换utils.js的CommonJS导出语法，导致import utils from './utils'后无法访问utils.cssLoaders方法。下面是具体的排查和修复步骤：

1. 检查转换后的utils.js导出格式 #

首先打开./utils.js，对比原CommonJS代码和转换后的ES6代码：

• 如果原CommonJS是默认导出（比如module.exports = { cssLoaders, otherMethod }），转换后的ES6应该保持默认导出结构：

  export default {
    cssLoaders(options) {
      // 原实现代码
    },
    // 其他方法...
  }
  

• 如果原CommonJS是命名导出（比如exports.cssLoaders = function() {}），转换工具可能会处理失误，需要手动调整为ES6命名导出：

  export function cssLoaders(options) {
    // 原实现代码
  }
  // 其他命名导出...
  

2. 匹配导入与导出方式 #

根据utils.js的实际导出格式，修改vue-loader.conf.js里的导入逻辑：

• 如果是默认导出：确保import utils from './utils'后，utils.cssLoaders确实存在（可以临时加console.log(utils)打印导出内容验证）
• 如果是命名导出：将导入语句改为import { cssLoaders } from './utils'，同时把调用处的_utils2.default.cssLoaders替换为cssLoaders，比如：

  loaders: cssLoaders({
    // 原配置参数
  })
  

3. 手动修复转换遗漏 #

自动转换工具偶尔会遗漏部分导出逻辑，比如原CommonJS里同时存在module.exports和exports.xxx的混合写法，这时候需要手动统一导出格式：

• 原CommonJS示例：

  // utils.js
  var cssLoaders = function(options) { /* ...实现 */ }
  exports.styleLoaders = function(options) { /* ...实现 */ }
  module.exports.cssLoaders = cssLoaders
  

• 正确的ES6转换应该统一为默认导出：

  // utils.js
  function cssLoaders(options) { /* ...实现 */ }
  function styleLoaders(options) { /* ...实现 */ }
  export default {
    cssLoaders,
    styleLoaders
  }
  

4. 验证修复效果 #

修改完成后，重新运行你的Webpack命令：

$ babel-node ./node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

如果仍有报错，优先通过console.log打印utils的导出内容，确认方法是否存在，再针对性调整。

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