webpack4 动态导入文件 dynamic-import 报错的解决方法_module build failed: referenceerror: unknown plugi

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

const router = new Router({
    routes: [{
        path: '/home',
        name: 'Home',
        component: () =>
            import('./views/home/Home.vue')
    }]
})
1
2
3
4
5
6
7
8

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):
1
2
3

3. 解决方案

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

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

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

{
    test: /\.js/,
    use: [{
        loader: 'babel-loader', 
        options: {//如果有这个设置则不用再添加.babelrc文件进行配置
            "babelrc": false,// 不采用.babelrc的配置
            "plugins": [
                "dynamic-import-webpack"
            ]
        }
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12