Question

我有build_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_modules.json中列出的文件，那么由于WebPack核心机制，所有这些文件都包含在捆绑中，但它们不是必需的，永远不会在当前版本中使用。我需要强制从bundle中排除那些多余的文件，因为在praxis中，我的./modules/文件夹包含200多个不同的模块，只有build_modules.json中的模块应包含在当前的bundle中。

也许我可以使用一些插件，或者可能在webpack.config.js文件内部来构建所需模块的列表，并将它们与node.js一起使用，然后将所有这些内容放到WebPack中作为预编译上下文

Answer 1

我遇到了类似的问题。 Webpack不允许创建动态需求。它在执行代码之前需要所有模块。但您可以使用require.context根据某些regexp规则加载必要的模块。您可以在此处阅读更多内容：webpack docs

您可以命名要以某种特定方式加载的模块，例如。 module.*并使用require.context("./modules/", false, /^module\..+$/)。然后在代码执行之前需要以module.开头的所有模块。

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

Answer 2

如果您只是需要执行模块

您需要在webpack配置中设置entry属性。此属性接受数组作为要包含在bundle中的文件的值。

// 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
  },
};

如果您需要从模块中导出某些内容

不幸的是，webpack作为数组的条目不会帮助你，因为它只导出数组中的最后一个文件。

我没有听说过可以组合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,
};

导入构建的bundle之后，它将返回带有模块的普通对象。您可以使用Object.values或类似内容将您的依赖项作为数组。

另一种方法是，您可以格式化exportString以导出导入数组。

我使用import * as name from ...格式向您展示了创建文件的更常用方法。如果您没有默认导出或只有默认导出，则最好分别使用export * from ...或export {default as name} from ...格式。

WebPack需要外部json文件中列表的上下文

2 个答案: