使用Webpack将ES6透明化为单独的文件

Question

是否可以配置webpack来执行以下操作:

babel src --watch --out-dir lib

这样一个看起来像这样的目录结构:

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

将所有文件编译到ES5并在lib目录下以相同的结构输出它们:

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

我对所有文件路径进行了全局传递并将它们作为单独的条目传递,但似乎webpack在定义输出文件时"忘记"了文件的位置.Output.path只提供[hash]令牌,虽然Output.file有更多的选项,但只提供[name],[hash]并且[chunk],至少看来,这种编译不受支持.

为了给我的问题一些上下文,我正在创建一个由React组件及其相关样式组成的npm模块.我正在使用CSS模块,所以我需要一种方法将JavaScript和CSS编译到模块的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]',
  },
  // ...
}