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!

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!

• javascript
• webpack
• bundle
• atom-editor

Share Improve this question Follow edited Feb 26, 2018 at 21:38 Legends 22.8k1717 gold badges101101 silver badges132132 bronze badges asked Feb 26, 2018 at 13:55 tgoretgore 6311 silver badge55 bronze badges 4

• What kind of errors are you getting when running the loaders? – marcofo88 Commented Feb 26, 2018 at 14:02
• 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 Commented Feb 26, 2018 at 15:29
• 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 monjs format. Or do genuinely have very many distinct entry points? edit: are you doing the multi-main entry thing? – Rhys Commented Feb 26, 2018 at 15:30
• 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 Commented Feb 26, 2018 at 16:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

Copy @Legends ment as answer here.

have no experience with vue files, but as I said you can bundle not only js files, but also image files, for example the regex for image files would be: /.(png|ico|svg|jpg|gif)$/.