Grunt-webpack wildcard on 'entry'

Question

I'm using Grunt to compile page level JS assets.

    webpack: {
        build: {
            entry: {
                // Add your page JS here!
                home: "./assets/scripts/tmp/Pages/home.js",
                events: "./assets/scripts/tmp/Pages/events.js"
            },
            output: {
                path: "./public/scripts"
            }
        }
    }

This is how I'm currently doing it, but I'd like to do something like:

    webpack: {
        build: {
            entry: "./assets/scripts/tmp/Pages/*",
            output: {
                path: "./public/scripts"
            }
        }
    }

However this fails with an "ERROR in Entry module not found:" error.

I've tried SRC and DEST options instead but they didn't seem to even compile the files :S

Thanks in advance

Answer 1

The entry option doesn't support wildcards, but grunt does. You can use grunts wildcard support to construct an object for the entry option:

var pagesBase = path.resolve("assets/scripts/tmp/Pages");

build: {
  entry: grunt.file.expand({ cwd: pagesBase }, "*").reduce(function(map, page) {
    map[path.basename(page)] = path.join(pagesBase, page);
    return map;
  }, {}),
  output: {
    path: "./public/scripts",
    filename: "[name].js" // You also need this to name the output file
  }
}

grunt.file.expand just returns an array of all matching files in the pages directory. Array.prototype.reduce is used to convert the array into an object.

Note: To make your example complete you also need to include [name] in the output.filename option.

Answer 2

To anyone else looking for a simple fact... this is what I used:

webpack: {
    build: {
        entry: {
            "home-page": "./" + path + "scripts/tmp/Pages/home-page.js",
            "event-page": "./" + path + "scripts/tmp/Pages/event-page.js",
            "performer-page": "./" + path + "scripts/tmp/Pages/performer-page.js",
            "order-page": "./" + path + "scripts/tmp/Pages/order-page.js",
            "support-page": "./" + path + "scripts/tmp/Pages/support-page.js"
        },
        output: {
            path: "public/scripts",
            filename: "[name].js"
        }
    }
}

Answer 3

Similar to Tobias K. answer but with a working example :

var config = {
  ...
  webpackFiles: {}
};

//Dynamically create list of files in a folder to bundle for webpack
grunt.file.expand({ cwd: 'my/folder/' }, "*").forEach(function(item){
  config.webpackFiles[item.substr(0,item.indexOf('.js'))] = './my/folder/' + item;
});

And then in your grunt task use it like this:

webpack: {
  build: {
    entry: config.webpackFiles,
    output: {
      path: "<%= config.jsDest %>/",
      filename: "[name].js"
    },
    module: {
     ...
    }
  }
},

The only downside is that if you want to add specific file to this build (for example bundle app.js) , you will have to add this to the webpackFiles variable like so

//Dynamically create list of view to bundle for webpack
config.webpackFiles.App = './' + config.jsSrc + '/App.js';
grunt.file.expand({ cwd: 'Static/js/src/views/' }, "*").forEach(function(item){
  config.webpackFiles[item.substr(0,item.indexOf('.js'))] = './Static/js/src/views/' + item;
});