Webpack - How to bundle/require all files of a folder (subfolder)

Question

I am trying to see if there is a shorter way of running webpack bundles, and also why my loaders do not work.

Here is my code:

module.exports = {
context: path.join(__dirname, 'dist'),
entry: ['./ES6bundle.js', './jQuery.js'],
output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
}
};
// module: {
//     loaders: [{
//         test: /\.js?$/,
//         exclude: /node_modules/,
//         loader: 'babel-loader',
//         query: {
//             presets: ['env']
//         }
//     }]
// };

The module.exports works but when I run the loaders I get errors.

My other question is about consolidating multiple entries into one file.
The project I am working on has many JS files, and I was wondering if there was a shortcut for multiple entries. Instead of typing out multiple entries' filenames, can I grab all JS files in the same folder or have a JS file to require them all?

Let me know if this makes sense or not. I am relatively new to programming. Thanks!

What kind of errors are you getting when running the loaders? — marcofo88
So I fixed the loader part of my question not too long after posting. In regards to my other question, is there a way to add multiple entries with one file path or do I need to enter them manually each time? — tgore
entry in my experience is for distinctly separate entry points into your app - if you want a single bundle output then you should really only have one entry point which in turn requires/imports the other files using something like the commonjs format. Or do genuinely have very many distinct entry points? edit: are you doing the multi-main entry thing? — Rhys
I can try the multi-main entry thing, I guess one way I could import the files into a single one for the entry — tgore

Legends Legends · Accepted Answer · 2018-02-26T18:44:34

Regarding the second part of your question:

can I grab all JS files in the same folder or have a JS file to require them all

You can have one entry file and in there you do:

module.exports = {
    context: path.join(__dirname, 'dist'),
    entry: ['./jQuery.js', './allJsFilesOfFolder.js'],

allJsFilesOfFolder.js:

require.context("../scripts/", true, /\.js$/);

This will bundle all scripts inside scripts and all its subfolders.

You need to install @types/webpack-env to have context at your hand.

Specify false if you want to bundle only the scripts in the scripts folder.

You can do the same with other resources like images, you only have to adapt the regex

Webpack - How to bundle/require all files of a folder (subfolder)

2 Answers