Webpack output all the files within a directory with the same name into a different folder

Question

I have the following directory:

  - src/
    - js/
      - profile1/
        - script1.js
        - script2.js
      - profile2/
        - script3.js
        - script4.js
      - script5.js
  - dist/
    - js/
  package.js
  webpack.config.js

I am trying to webpack all JS files from /src/js into dist/js folder conserving the same naming and folder structure.

I could write a different config for each file and webpack each JS file, but I am wondering if there is a set of config that I can write to do all the operations in one shot.

I have tried:

const path = require('path');

module.exports = {
  entry: './src/js/*.js',
  output: {
    filename: '*.js',
    path: path.resolve(__dirname, 'dist'),
  }
}

failed miserably.

Answer 1

You can match the entry file first like using glob (install it with npm i glob ). Then you can change the output dynamically by appending [name] to output.filename . Here's the complete code:

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

module.exports = {
  entry: Object.fromEntries(glob.sync(path.resolve(__dirname, 'src/js/**/*.js')).map((v) => [
    v.split('src/js/')[1], v,
  ])),
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist/js'),
  },
};