问题说明

在index.js页面中，使用的动态导入 import()。在webpack.config.js文件中，使用babel-loader处理。报如下错误。 如果不用babel-loader，反而也能正常运行。

image.png

问题解析

首先不用babel-loader，反而也能正常运行。很奇怪。只能感觉是webpack本身对import做了处理。看打包后的文件的猜测。这点不确定。
打包后的转化如下：

image.png

其次，按正常，应该通过babel-loader处理ES6代码。引入后竟然报错。官网有提供。

image.png
按照此项，安装了es6-promise或promise-polyfill。都不可以。
后来，发现了这篇文章，webpack动态导入文件报错的解决方法
虽然跟官网不一样，但是vue router的官网，的确有介绍。如下
image.png
按照操作，仍然不行。仔细看，说的上图，说的是在webpack 2中。我目前用的是4版本。所以我想到了版本问题。
最后，参考启动项目报错this.setDynamic is not a function这篇文章，认识到是版本问题。

// babel7以前npm安装core
npm i babel-core --save-dev
//babel7以后安装core
npm i @babel/core --save-dev

@babel/preset， @babel/plugin不可省略，否则会当成babel7以下插件处理，出现无法找到插件的报错。

{
 "presets": ["@babel/preset-react", ["@babel/preset-env"]],
 "plugins": [
   "@babel/plugin-transform-runtime"
 ]
}

我的package.json如下：

"devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
     "babel-preset-es2015": "^6.24.1",
  }
 

总结

其实在一开始不用babel-loader，就能正常运行。应该能猜到是版本。当时的babel相关的版本不支持动态导入。版本是个最头疼的问题。