webpack中的多个动态入口脚本？

Question

Let's say I have an app structure like this

app/
   modules/
      module1/
         <other files>
         script.js
      module2/
         <other files>
         script.js
      module3/
         <other files>
         script.js
   lib/
      <some common/shared scripts to import from>
public/
   js/

How can I configure webpack to bundle and output each script.js (which will be importing various libs/utilities from the common lib folder) into a structure like this?

eg

public/js/module1/script.js
public/js/module2/script.js

But without individually defining each entry file? Something like gulp does with /**/*.js syntax?

My goal is NOT to have to maintain my webpack.config.js file each time I add a new module/component.

Answer 1

You need glob package and set entry and output in your webpack.config.js . Example when webpack.config.js in root dir.

var webpack = require('webpack');
var glob = require('glob');

//Generate object for webpack entry
//rename './app/modules/module1/script.js' -> 'module1/script'
var entryObject = glob.sync('./app/modules/**/script.js').reduce(
    function (entries, entry) {
        var matchForRename = /^\.\/app\/modules\/([\w\d_]+\/script)\.js$/g.exec(entry);

        if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') {
            entries[matchForRename[1]] = entry;
        }

        return entries;
    }, 
    {}
);

module.exports = {
    ...
    entry: entryObject,//{'moduleName/script': './app/modules/moduleName/script.js', ...}
    output: {
        path: __dirname + '/public/js',
        filename: '[name].js'//'moduleName/script.js', [name] - key from entryObject
    }
    ...
};

If you will have error with fs like " can't resolve 'fs' " add option

node: {
    fs: "empty"
}

Also, you can bundle your files from <other files> into public script.js using other entryObject.

var entryObject = glob.sync('./app/modules/**/*.js').reduce(
    function (entries, entry) {
        var matchForRename = /^\.\/app\/modules\/([\w\d_]+)\/.+\.js$/g.exec(entry);

        if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') {
            var entryName = matchForRename[1] + '/script';

            if (typeof entries[entryName] !== 'undefined') {
                entries[entryName].push(entry);
            } else {
                entries[entryName] = [entry];
            }

        }

        return entries;
    },
    {}
);

Answer 2

You can use this snippet and adjust it for your needs

const path = require('path')
const glob = require('glob')

const entries = glob.sync('./src/entry/*').reduce((entries, entry) => {
    const entryName = path.parse(entry).name
    entries[entryName] = entry

    return entries
}, {});

module.exports = {
    entry: entries,
...

'./src/entry/*' - regex to find files from which your entries will be constructed

const entryName = path.parse(entry).name - extract filename from file path

entries[entryName] = entry - construct entry record

as a result you will have something like

{
    file1: 'path/to/file1.js',
    file2: 'path/to/file2.js',
    ...
}