关于webpack打包ES6模块遇到的问题

打算用webpack打包一个js文件，文件如下
index.js


```javascript
function webpackDemo(){
   this.name='slll',
   this.sex='girl'
}
export default webpackDemo

打包配置文件内容webpack.config.js


```javascript
// 导入处理路径的模块
const path = require('path');
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
  // mode: 'development',
  entry: './src/index.js', // 项目入口文件
  output: { //打包文件出口
    path: path.resolve(__dirname, 'dist'), // 配置输出的路径
    filename: 'asyncLoad.min.js', // 配置输出的文件名
    library: 'asyncLoad',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules|bower_components/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['babel-preset-env'],
            plugins:[require('babel-plugin-transform-runtime')]
          },
        },
      }
    ]
  }
}

依赖

img

打包后在html页面导入，index.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AsyncLoad</title>
</head>

<body>
  <script type="module">
    import webpackDemo from "../dist/asyncLoad.min.js"
    console.log(webpackDemo)
  </script>
</body>

</html>

运行结果：

img


试过很多方法，依旧报这个错，第一次尝试打包，不知如何解决，直接导入打包前的index.js是运行成功的，希望能帮帮忙~

libraryTarget:“umd”，该方案支持commonjs、commonjs2、amd。支持require引入，不支持import引入。
可以看下打包后的文件：
import 直接引入，需要export default 导出。