Javascript 网页包需要外部json文件列表中的上下文

我有

build\u modules.json

文件，该文件包含WebPack需要的模块信息，例如：

[
    'module.superman',
    'module.superwoman',
    'module.spiderman',
    'module.wolverine'
]

因此，我只需要一次所有这些模块就可以将所有内容编译成单个包：

var _modules = require('./build_modules.json');

_modules.forEach(function(_module){
    require('./modules/' + _module);
});

一切都很好，但如果我在

/modules/

文件夹中有一些其他文件，而不是

build\u modules.json

中列出的文件，则由于WebPack核心机制，所有这些文件都包含在捆绑包中，但它们不是必需的，并且永远不会在当前构建中使用。我需要强制从捆绑包中排除这些多余的文件，因为在praxis中，我的

/modules/

文件夹包含200多个不同的模块，并且只有

构建模块中的模块。json

应该包含在当前捆绑包中

---

也许我可以使用一些插件，或者在

webpack.config.js

文件中构建所需模块的列表，并要求它们与node.js一起使用，然后将所有这些内容作为预编译上下文放到webpack中？

我遇到了类似的问题。网页包不允许创建动态文件。在执行代码之前，需要使用所有模块。 但是您可以使用

require.context

根据一些

regexp

规则加载必要的模块。您可以在此处阅读更多内容：

您可以以某种特定方式命名要加载的模块，例如，

module.*

并使用

require.context（“/modules/”，false，/^module\…+$/）

。 然后，在执行代码之前，将需要以

模块。

开头的所有模块

---

我记得我为此挣扎了几个小时，这对我来说是最好的解决方案。

以防您只需要执行模块

您需要在网页包配置中设置

entry

属性。此属性接受数组作为要包含在捆绑包中的文件的值

// webpack.config.js
const fs = require('fs');
const path = require('path');

const getModulePath = module => path.resolve(__dirname, './relative/path/to/modules/directory', module);

const fileContent = fs.readFileSync('./your.json');
const entries = JSON.parse(fileContent).map(getModulePath);

module.exports = {
  // all entries will be built during one build process
  // if you need you can split each entry to separate config file
  entry: {
    bundle1: entries, // build modules from JSON file to single bundle
    bundle2: [ './file1', './file2' ], // build static modules to single bundle
    bundle3: './sindle/file', // "classic" build
    all: [ ...entries, './file1', './file2', './sindle/file' ], // you can combine everything to 1 bundle
  },
};

以防您需要从模块中导出某些内容

不幸的是，网页包作为数组的条目对您没有帮助，因为它将只导出数组中的最后一个文件

我没有听说过这样的插件可以组合certan文件并将其用作入口点。但是您可以自己创建这样的文件

// webpack.config.js
const fs = require('fs');
const path = require('path');

// saving tmp file location
const pathToCreatedFile = path.resolve(__dirname, './path/to/created/file');
// implement fn to get relative path to modules from tmp file
const getModulePath = module => path.relative(pathToCreatedFile, path.resolve(
  __dirname,
  './relative/path/to/modules/directory',
  module,
));

// read json
const fileContent = fs.readFileSync('./path/to/your.json');
// prepare modules for tmp file
const entries = JSON.parse(fileContent)
  .map(item => ({
    name: item.slice(7),
    relpath: getModulePath(item),
  }));

// here generate import directive for each module. I used `import * as modules_name from 'path';` format
// you can choose any
const importsString = entries.map(({ name, relpath }) => `import * as ${name} from '${relpath}';`).join('\n');
// here generate exports from tmp file. It contain of all imports
const exportsString = `export {${entries.map(({name}) => name).join(',\n')}};`;
// and here just concatenate imports ad exports
const content = [
  entries.map(({ name, relpath }) => `import * as ${name} from '${relpath}';`).join('\n'),
  `export {${entries.map(({name}) => name).join(',\n')}};`,
].join('\n');

// and save tmp file content to fs
fs.writeFileSync(pathToCreatedFile, content);

module.exports = {
  // and here use saved tmp file path as entry point
  entry: pathToCreatedFile,
};

导入构建包后，它将返回带有模块的普通对象。您可以使用

Object.values

或类似方法将依赖项作为数组获取

另一种方法是，您可以格式化

exportString

以导出导入数组

---

我使用

import*作为…

格式的名称，向您展示了创建文件的更常见的方法。如果您没有任何默认导出或只有默认导出，最好分别使用

export*from…

或

export{default as name}from…

格式。

您从Pawel那里得到的答案有什么问题？我仍然相信有一个解决方案。从webpack的角度来看，没有任何解决方案可以通过手动模块列表手动创建上下文，这是非常愚蠢的。可能有一些插件或模块，允许这样做？你错过了，然后把所有的东西作为一个预编译的背景网页？（特别是上下文关键字）。我不需要一个包含模块的单独文件，因为我需要在项目的主文件中包含所有模块。更具体地说，说

var marvel=[]marvel.push（require（'./modules/'+\u module））。如果按照您的建议，我不能要求所有模块都以这种方式连接到一个阵列
marvel
。它们不太可能彼此分离，即使放在一个最终目的地捆绑包中。