CODEWITHSUNDEEP
javascriptwebpackecmascript-6
Fantasmic
Fantasmic

Reputation: 1202

webpack - Multiple entry and outputs with same structure but different directories?

I am relatively new with webpack and I was wondering if it is possible to have multiple entries and outputs with the same folder structure but in different directories. Let's suppose I have this structure:

application
  views
    scripts
      docs
        file1.js
        file2.js
      company
        cp1.js
        cp2.js

and I want to output in this directory/structure:

public
  js
    build
      docs
        file1.js
        file2.js
      company
        cp1.js
        cp2.js

Actually, my webpack.config.js is like this: 

entry: {
        app: path.resolve(__dirname, 'application', 'views', 'scripts', 'file1.js'),
        app2: path.resolve(__dirname, 'application', 'views', 'scripts', 'file2.js'),
    },
    output: {
        path: path.resolve(__dirname, 'public', 'js', 'scripts'),
        filename: '[name].bundle.js'
    }

but I do not want to specify individual entries for all js files and it's outputting in the wrong directory. Is it possible?

Upvotes: 2

Views: 1306

Answers (1)

Murli Prajapati
Murli Prajapati

Reputation: 9713

Here is the sample webpack.config.js code which would generate the required structure. 

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

function getEntries(pattern) {
  const entries = {};
  glob.sync(pattern).forEach((file) => {
    const outputFileKey = file.replace('application/views/scripts/', '');
    entries[outputFileKey] = path.join(__dirname, file);
  });
  return entries;
}

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

Upvotes: 1

Related Questions