How to have Webpack config file entry as './src/*.js'?

Question

I am new to webpack and would like to have my entry a little different so that it can take all js file in a directory and create a bundle of all in one.

My Config File:

var path = require('path');
module.exports = {
  entry:  './src/*.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

This result in error as following:

Here, src is a directory with multiple js files. Any Suggestion will be appreciated.Thank you.

score 1 · Accepted Answer · answered Feb 09 '18 at 10:12

1

You can use globs

const glob = require("glob");
module.exports = {
  entry: {
     js: glob.sync("./src/**/*.js"),  
  }
}

answered Feb 09 '18 at 10:12

Pandelis

1,854
13
20

Thanks. Works like a butter. – Gaurav Kumar Feb 09 '18 at 10:28

score 0 · Answer 2 · answered Feb 09 '18 at 10:15

In case the order does not matter, use @Pandelis' answer. Otherwise, keep reading:

Usually bundle is created from files that require or import each other. Think about it: if webpack bundles all files in one directory, how does it know which should come first?

What you can do, without altering your files, is to make a new JS file that imports all the files you need:

# webpack_bundle_me.js

import * as File1 from "./file1.js";
import * as File2 from "./file2.js";
// and so on

This way it's easy for you or anyone else to alter the order, without digging in webpack.config.js.

You can do this in webpack config as well: https://stackoverflow.com/a/33039902/607407

Very Good suggestion brother. But It seems @Pandelis' answer worked like a charm. — Gaurav Kumar, Feb 09 '18 at 10:23
Yep, I was just demonstrating alternative approach, for general things, his answer is best. — Giulio Bambini, Feb 09 '18 at 10:33

score 0 · Answer 3 · answered Feb 09 '18 at 10:24

New Config File:

var path = require('path');
const glob = require("glob");
module.exports = {
 entry: {
     js: glob.sync("./src/**/*.js"),  
  }, 
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

OR

var path = require('path');
const glob = require("glob");
module.exports = {
 entry: glob.sync('./src/*.js'), 
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

How to have Webpack config file entry as './src/*.js'?

3 Answers3