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

时间:2019-10-29 16:27:16

标签: javascript webpack

我有

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多个组件

1 个答案:

答案 0 :(得分:1)

此代码将提供所需的输出。

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