webpack4 路由懒加载

webpack中配置使用vue-router中需求的'syntax-dynamic-import'插件

注意
如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

安装

npm install --save-dev @babel/plugin-syntax-dynamic-import

配置webpack

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

使用

在vue-router中正常import即可

const Foo = () => import('./Foo.vue')