javascriptwebpackbundling-and-minification

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

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?

Solution

  • 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