Webpack动态需要抛出错误

Question

我有以下一段效果很好的代码：

require.ensure(['./core/sample-form.js'], require => {
    require('./core/sample-form.js');  
});

现在，如果我将该字符串放入变量中：

const ajaxJs = './core/sample-form.js';
require.ensure([ajaxJs], require => {
    require(ajaxJs);  // eslint-disable-line import/no-dynamic-require
});

它会引发以下错误：

未捕获（在承诺中）错误：找不到模块“。” 在webpackMissingModule

有什么方法可以使用变量来满足要求吗？

Answer 1

看一下Webpack的Context Module 。

显然，当您尝试动态地需要模块时，Webpack将尝试将输入表达式解析为context 。

尝试以下代码（ 尚未测试过 ）：

const ajaxJs = './sample-form.js';
core = require.context('./core', true, /^\.\/.*\.js$/);
require.ensure([], () => {
    core(ajaxJs);
});

Answer 2

当名称是动态变量时，Webpack无法确定要捆绑的模块。 您不能在require使用变量名称。 你必须做的事情如下：

require.ensure(['./core/sample-form.js'], require => {
    require('./core/sample-form.js');  // eslint-disable-line import/no-dynamic-require
});

这个答案可以帮助你。