Question

我在执行动态导入时遇到了麻烦（我可能只是缺乏对概念的理解）。

我有一个用vue.js用typescript编写的webpack应用程序。所有框架都是最新的稳定版本。我希望该应用程序支持插件组件。该插件在应用程序配置中定义，然后加载了动态导入，并可以显示在某处。

我在Webpack配置中设置了两个单独的配置，一个用于应用程序，另一个用于插件：

webpack.config.js：

...
var main = Object.assign({
        entry: {
           Home: './ViewModels/Home/main.ts'
        },
        output: {
            path: path.join(__dirname, "./Scripts/dist/"),
            filename: "[name].js",
            chunkFilename: '[name].js'
        },
    },
    vueJsConfig);

var testChunkConfig = Object.assign({
        entry: {
           TestChunk: './ViewModels/Test/registrations.ts'
        },
        output: {
            path: path.join(__dirname, "./Scripts/dist/"),
            filename: "[name].js",
            chunkFilename: '[name].js'
        },
    },
    vueJsConfig);


module.exports = [main, testChunkConfig];

`〜/ ViewModels / TestChunk / registrations.ts'：

import Vue from "vue";
Vue.component('testExternal', require('./testExternalComponent.vue').default);

`〜/ ViewModels / Home / main.ts'：

...
let test = "TestChunk";
import(test);
...

用法： ~/ViewModels/Components/ProjectAdministration/Test/projectAdminTest.vue

<template>
    <div>
        <h2>Test Page</h2>
        <testExternal></testExternal>
    </div>
</template>

不幸的是，这显示了一个错误：

Uncaught (in promise) Error: Cannot find module 'TestChunk'
    at eval (eval at ./ViewModels/Home lazy recursive

使用webpack动态导入

0 个答案: