webpack的 require.ensure 使用

「爱情、让人受尽委屈。」 2022-09-08 13:50 139阅读 0赞

// 批量导入.md文件
    
    import GROUPS from '/';
    
    GROUPS.map(item => { return item.component = LOAD_DOCS_MAP["zh-CN"]('zh-CN', item.path) })
    
    const LOAD_DOCS_MAP = {
        'zh-CN': (lang, path) => {
            return r => require.ensure([], () =>
                r(require(`./docs/zh-CN${path}.md`)),
                'zh-CN');
        }
    };
    
    const introduction = [{
            path: '/',
            redirect: '/installation'
        },
        {
            path: '/changelog',
            name: 'changelog',
            component: changelog
        },
        {
            path: '/installation',
            name: 'installation',
            component: installation
        },
        {
            path: '/quickstart',
            name: 'quickstart',
            component: quickstart
        },
        // {
        //   path: '/button',
        //   name: 'button',
        //   component: LOAD_DOCS_MAP["zh-CN"]('zh-CN', '/button')
        // },
        // {
        //   path: '/input',
        //   name: 'input',
        //   component: LOAD_DOCS_MAP["zh-CN"]('zh-CN', '/input')
        // }
    ]
    const routes = GROUPS.concat(introduction);
    
    export default new VueRouter({
        mode: 'hash',
        base: process.env.BASE_URL,
        routes,
    });

好处就是，不用在 introduction  里写出所有的对象了！！

其实原理就是：

const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')

只不过现在我们都用 es6的 import() 方式 异步加载路由：

const notFound = () => import('@views/common/404')

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack使用

一、安装webpack 首先安装node（点击[详情][Link 1]），再安装webpack，命令如下： npm install webpack@3.6.0 -

朱雀/ 2022年12月24日 00:54/ 0 赞/ 134 阅读

相关【Webpack】模块打包工具 Webpack 的各种使用方式

1. Webpack 简介 Webpack 是一个现代 JavaScript 的静态模块打包器(module bundler)；那为什么要用这种构建工具进行

淩亂°似流年/ 2022年12月17日 07:30/ 0 赞/ 373 阅读

相关 Webpack的使用

Webpack 的使用 -------------------- 安装webpack： cnpm install webpack -g cnpm

傷城~/ 2022年12月02日 15:06/ 0 赞/ 157 阅读

相关 webpack的 require.ensure 使用

// 批量导入.md文件 import GROUPS from '/'; GROUPS.map(item => { return i

「爱情、让人受尽委屈。」/ 2022年09月08日 13:50/ 0 赞/ 140 阅读

相关什么是Webpack?怎么使用Webpack?

什么是Webpack?怎么使用Webpack? 1. 什么是Webpack? Webpack模块打包工具，它会分析模块之间的依赖关系，然后使用loaders处理

旧城等待，/ 2022年05月20日 04:55/ 0 赞/ 274 阅读

相关 WebPack 的简单使用

nrm 的安装： npm install -g nrm 全局安装，安装成功界面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

柔光的暖阳◎/ 2022年04月23日 11:04/ 0 赞/ 202 阅读

相关 webpack中webpack.config.js的使用

文章目录 webpack.config.js的作用：示例源码运行结果分析 webpack.config.j

朴灿烈づ我的快乐病毒、/ 2022年04月18日 05:43/ 0 赞/ 604 阅读

相关 webpack使用

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关

绝地灬酷狼/ 2022年01月26日 16:55/ 0 赞/ 239 阅读

相关 webpack_（第二章）_使用webpack的配置文件

webpack的配置文件 webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，

妖狐艹你老母/ 2022年01月09日 16:21/ 0 赞/ 258 阅读

相关 Webpack的使用

一、了解Webpack 　　1、什么是webpack 　　　　Webpack是一个模块打包器(bundler) 　　　　在Webpack看来，前端的所有资源文件

亦凉/ 2021年12月03日 11:27/ 0 赞/ 373 阅读