webpack4 - 动态导入文件 dynamic-import 报错的解决方法

介绍

webpack4动态导入文件报错，按照错误提示安装了插件，但未果。。

最后查到一个可行方案，记录如下。

1.通过懒加载的方式动态引入文件

const router = new Router({routes: [{path: '/home',name: 'Home',component: () =>import('./views/home/Home.vue')}]
})

2.报错如下所示

ERROR in ./src/router.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\practice\vue-pro\webpack-vue-create\src\router.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (19:13):

解决方案

一：安装插件 babel-plugin-dynamic-import-webpack

npm install babel-plugin-dynamic-import-webpack --save-dev

二：在配置文件的module的rules下进行插件的配置，如下

{test: /\.js/,use: [{loader: 'babel-loader', options: {//如果有这个设置则不用再添加.babelrc文件进行配置"babelrc": false,// 不采用.babelrc的配置"plugins": ["dynamic-import-webpack"]}}]
}

OK。