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')
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容