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
});

它抛出以下错误：

Uncaught (in promise) Error: Cannot find module "." at webpackMissingModule

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

Answer 1

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

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

回答会有帮助。

Answer 2

看看Webpack的Context Module。

显然，当您尝试动态请求模块时，Webpack 会尝试将输入表达式解析为 context.

试试下面的代码（没测试过）：

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

Webpack 动态要求抛出错误

Webpack dynamic require throwing error

javascript

webpack-2

commonjs