webpack import() 动态加载模块报错，插件也下载了。

Question

问题描述

问题出现的平台版本及自己尝试过哪些方法

相关代码

// index.js

 async function getComponent() {
var element = document.createElement('div');
   const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
  }
  getComponent().then(component => {
      document.body.appendChild(component);
  })

• package.json

{
  "name": "node",
  "sideEffects": false,
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "w": "webpack --config ./build/webpack.dev.js --open chrome",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js  --open chrome",
    "prod": "webpack --config ./build/webpack.prod.js  --open chrome"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.6.0",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.11",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "lodash": "^4.17.14"
  }
}

• .babelrc

{
    presets: [
        [
            "@babel/preset-env", //es6 转es5
            {
            useBuiltIns:'usage'
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

// webpack.common.js

const pathlib = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html
const CleanWebpackPlugin = require('clean-webpack-plugin'); //引入清除文件插件

module.exports = {
   //打包的入口文件
   entry: {
      main: './src/index.js',//从哪个文件开始打包
   },

   module: {//模块webpack不知道怎么办
      rules: [
         {
            test: /\.js$/,
            exclude: /node_modules/, //js文件在node_modules里面就不用babel解析了
            loader: "babel-loader",

         },
         {
            test: /\.(jpg|png|gif)$/,//模块以jpg结尾的文件
            //file-loader
            /*          use: {
                        loader: 'file-loader',//npm i file-loader -D
                        options:{
                           name:'[name].[ext]',//名字和后缀，打包文件一模一样
                           outputPath:'images/',//jpg|png|gif 打包到dist/images里
                        }
                     } */

            //url-loader
            use: {
               loader: 'url-loader',//npm i url-loader -D
               options: {
                  name: '[name].[ext]',//placeholders 名字和后缀，打包文件一模一样
                  outputPath: 'images/',//jpg|png|gif 打包到dist/images里
                  limit: 2048,//如果图片超过了2048个字节，就像file-load打包到dist目录里
               }
            },
         },

         //CSS
         {
            /*             test: /\.(css)$/,//模块以css结尾的文件
                        use:[
                           'style-loader',
                           'css-loader',
                        ]  */
         },

         //SASS
         {
            test: /.(sa|sc|c)ss$/,
            use: [
               'style-loader',
               'css-loader',
               'sass-loader',
               'postcss-loader',
            ]
         },

         // CSS3厂家后缀
         {
            /*             test: /\.(css)$/,//模块以css结尾的文件
                        use:[
                           'style-loader',
                           {
                             loader:'css-loader',
                             options:{
                                importLoaders:2,
                                //modules:true,//css开启局部模块
                             }
                           },
                           'postcss-loader',//css3特性前缀
                        ]   */
         },

         //打包字体文件
         {
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
               loader: 'file-loader',
            }
         }
      ]

   },
   //插件
   plugins: [
      //打包之前，删除dist目录
      new CleanWebpackPlugin.CleanWebpackPlugin(),
      //在打包结束后自动生成html
      new HtmlWebpackPlugin({
         template: 'src/index.html' //html模版
      }),
   ],
   //代码分割
   optimization: {
      splitChunks: {
         chunks: "all",//代码分割只对异步代码生效
         minSize: 30000,//引入模块小于30KB就不做分割
         minChunks: 1,//index.js入口文件模块引入1次就代码分割
         maxAsyncRequests: 5,//最大的按需(异步)加载次数，默认为 5；
         maxInitialRequests: 3,//最大的初始化加载次数，默认为 3；
         automaticNameDelimiter: '~',
         name: true,//cacheGroups 里面的自定义名字有效
         cacheGroups: {//缓存组
            vendors: {
               test: /[\\/]node_modules[\\/]/,//node_modules引入打包
               priority: -10 //打包的优先级
            },
            default: {//自己写的模块打包到哪里
               priority: -20,//打包的优先级
               reuseExistingChunk: true,//如果一个模块已经打包过了，就忽略这个模块
               filename:'commom.js'//别名
            }
         }
      }
   },
   output: {
      filename: '[name].js',
      path: pathlib.resolve(__dirname, '../dist'),
   }

}

//webpack.dev.js

const merge=require('webpack-merge');
const commonConfig=require('./webpack.common');
const devconfig = {
   mode: 'development',//打包的模式默认是压缩production (development开发代码不压缩)
   devtool:'cheap-module-eval-source-map', //源码哪里错误了开发,开发环境

   //自动打包
   devServer: {
      contentBase: './dist',
   },
    
    //开发环境development 需要加 optimization ,生产环境不需要加
    optimization:{
      usedExports:true,//那些导出的模块被使用才进行打包
    },
}

module.exports=merge(commonConfig,devconfig)

请问大神错在哪里啊，@babel/plugin-syntax-dynamic-import 插件也下载了？