Build all js files to target folder with webpack

Question

I have

src/lib - here is a folders with components. eg:

src/lib/button/button.js

src/lib/checkbox/checkbox.js

src/lib/drawer/drawer.js

etc.

How to compile all this files to target folder

in result i want to get build:

target/button.js (with transformed to es5 syntax)

target/checbox.js (with transformed to es5 syntax)

target/drawer.js (with transformed to es5 syntax)

multiple entries is not a solution for me. There will be more than 50+ components

Answer 1

This code would give the required output.

const glob = require('glob');
const path = require('path');

function getEntries(pattern) {
  const entries = {};
  glob.sync(pattern).forEach((file) => {
    const outputFileKey = path.basename(file);
    entries[outputFileKey] = path.join(__dirname, file);
  });

  return entries;
}

module.exports = {
  entry: getEntries('src/**/*.js'),
  output: {
    path: __dirname + '/target',
    filename: '[name]',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
  },
};

Ref: https://stackoverflow.com/a/42672703/5271656