使用 webpack 将所有 js 文件构建到目标文件夹

Question

我有

src/lib - 这是一个包含组件的文件夹。 例如：

src/lib/button/button.js

src/lib/checkbox/checkbox.js

src/lib/drawer/drawer.js

等等

如何将所有这些文件编译到target文件夹

结果我想构建：

target/button.js （转换为 es5 语法）

target/checbox.js （转换为 es5 语法）

target/drawer.js （转换为 es5 语法）

多个条目对我来说不是解决方案。 将有50多个组件

Answer 1

此代码将提供所需的 output。

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

function getEntries(pattern) {
  const entries = {};
  glob.sync(pattern).forEach((file) => {
    const outputFileKey = path.basename(file);
    entries[outputFileKey] = path.join(__dirname, file);
  });

  return entries;
}

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

参考： https://stackoverflow.com/a/42672703/5271656