WebPack requires context from a list in an external json file

Question

I have a file build_modules.jsonthat should contain information about modules, for example WebPack:

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

So, I need to require that all of these modules be only once to compile everything into one package:

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

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

Everything works very well, but if I have other files in the folder ./modules/than indicated in build_modules.json, they are all included in the package due to the main WebPack mechanism, although they are not required and will never be used in the current assembly. I need to exclude these extra files from the package, because in praxis my folder ./modules/contains more than 200 different modules, and only those modules that are in build_modules.jsonshould be included in the current package.

, , , webpack.config.js, node.js, WebPack ?

Answer 1

entry webpack. .

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

. Object.values , .

aproach, exportString .

import * as name from ..., . , export * from ... export {default as name} from ... .

Answer 2

. Webpack . . require.context regexp. :

, , . module.* require.context("./modules/", false, /^module\..+$/). , module..

, , .