Webpack中使用import和export关键字报错的问题求助

各位大佬好，我最近在搭项目的时候碰到个Webpack相关的报错，折腾半天没捋清楚问题出在哪，特意来求助大家！

先给大家看下我的代码文件：

这是模块文件sum.js里的代码：

function sum(a, b) {  
  return a + b; 
} 
export default sum;

然后是项目的入口脚本index.js：

import sum from './sum.js';     
const add = sum(2, 4);     
console.log(add);

结果我执行npm run dev启动项目时，直接弹出了下面这个报错：

Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (4:0) 
File was processed with these loaders:  
* ./node_modules/babel-loader

我本来以为用了babel-loader就能处理ES模块的语法了，结果还是出问题，有没有大佬能帮我看看是不是哪里的配置漏了，或者有什么解决这个报错的办法呀？

内容来源于stack exchange