使用 Webpack 将 ES6 转换为单独的文件答案

【问题标题】：Using Webpack To Transpile ES6 as separate files使用 Webpack 将 ES6 转换为单独的文件
【发布时间】：2017-07-28 23:30:36
【问题描述】：

是否可以将 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

我通过了 globbing 所有文件路径并将它们作为单独的条目传递，但似乎 webpack 在定义输出文件时会“忘记”文件的位置。 Output.path 只提供[hash] 令牌，而Output.file 有更多选项，但只提供[name]、[hash] 和[chunk]，因此至少看起来不支持这种编译。

为了给我的问题提供一些背景信息，我正在创建一个由 React 组件及其相关样式组成的 npm 模块。我正在使用 CSS 模块，所以我需要一种方法将 JavaScript 和 CSS 编译到模块的 lib 目录中。

【问题讨论】：

标签： javascript webpack babeljs transpiler babel-loader

【解决方案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]',
  },
  // ...
}

【讨论】：