使用 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