Webpack/Babel compiling scripts

Question

I'm learning webpack and babel, and there's something that's confusing me.

In most cases I'm seeing the config file with input and output like this:

entry: { main: './src/index.js'},
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },

That all makes complete sense, but what if you want more than one js file to be compiled into dist? What if you have, for example, multiple js files that are being imported and exported?

I understand that many people will be using webpack with React, and so will simply use the compilation on the App.js file - but is this the same principle generally? For example, should I import all files that I want to be compiled into a single js file, and then use wpack/babel on that one?

I hope I'm making sense...it would be great to clarify.

Many thanks,

Raph

Answer 1

Webpack can be configured to take multiple entry points:

entry: {
    app: "./src/scripts/app.js",
    vendor: "pathofsomeotherentrypoint"
},
output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
},

We can even generate multiple bundles (one for each entry point).

entry: {
    app: "./src/scripts/app.js",
    vendor: "pathofsomeotherentrypoint"
},
output: {
    filename: "./dist/[name].bundle.js" 
},

above config will generate two bundles app.bundle.js and vendor.bundle.js

we can also include multiple files from a directory using glob pattern matching

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

For more explanation read references.

References:

https://medium.com/a-beginners-guide-for-webpack-2/multiple-entries-e1b3d83579bf

https://webpack.js.org/concepts/entry-points/

https://stackoverflow.com/a/34545812/2073920