Webpack: How do I bundle multiple javascript files into a single output file?

Question

Suppose I have two files, main.js and app.js ; how do I use Webpack to bundle both of them into one file: bundle.js ?

Answer 1

create one entry.js which is your webpack entry file and in this your require your additional files

webpack.config.js

module.exports = {
   entry: './src/entry.js'
   ...
};

/src/entry.js

// new syntax
import './main.js';
import './app.js';

// or old syntax
require('./main.js');
require('./app.js');

if these two files depend on each other, it would be be beneficial to reflect this in your dependency tree and require main.js in your app.js and not in entry.js for example

Answer 2

You can pass an array of entries:

module.exports = {
   entry: ['./main.js', './app.js'],
   ...
};

Also, you can pass them as a CLI option :

webpack ./main.js ./app.js --config=webpack.config.js

Answer 3

You can use webpack-concat-plugin.

https://www.npmjs.com/package/webpack-concat-plugin#publicpath-stringboolean-default-webpacks-publicpath