Using Webpack Transpile ES6 as Separate Files

Question

Is it possible to configure webpack for the equivalent:

babel src --watch --out-dir lib

So, the directory structure looks like this:

- src
  - alpha
    - beta.js
    - charlie
       - delta.js
    - echo.js
    - foxtrot
      - golf
        - hotel.js

Compiles all files on ES5 and displays them in an identical structure in the directory lib:

- lib
  - alpha
    - beta.js
    - charlie
       - delta.js
    - echo.js
    - foxtrot
      - golf
        - hotel.js

I accepted the pass by masking all the file paths and passing them as separate entries, but webpack seems to “forget” the location of the files when it comes to determining the output files. Output.pathoffers only a token [hash], but Output.filehas more options, but offers only [name], [hash]and [chunk]therefore, at least, it seems that this type of compilation is not supported.

- , npm, React . CSS-, JavaScript CSS lib lib.

Answer 1

, .

entry: {
  'foo/f.js': __dirname + '/src/foo/f.js',
  'bar/b.js': __dirname + '/src/bar/b.js',
},
output: {
  path: path.resolve(__dirname, 'lib'),
  filename: '[name]',
},

, :

const glob = require('glob');

function getEntries(pattern) {
  const entries = {};

  glob.sync(pattern).forEach((file) => {
    entries[file.replace('src/', '')] = path.join(__dirname, file);
  });

  return entries;
}

module.exports = {
  entry: getEntries('src/**/*.js'),
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: '[name]',
  },
  // ...
}