如何将 Webpack 配置文件条目设为 './src/*.js'？答案

【问题标题】：How to have Webpack config file entry as './src/*.js'?如何将 Webpack 配置文件条目设为 './src/*.js'？
【发布时间】：2023-03-17 09:20:01
【问题描述】：

我是 webpack 的新手，希望我的 entry 有点不同，以便它可以将所有 js 文件放在一个目录中并创建一个包。

我的配置文件：

var path = require('path');
module.exports = {
  entry:  './src/*.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

这会导致如下错误：

在这里， src 是一个包含多个 js 文件的目录。任何建议将不胜感激。谢谢。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

你可以使用 glob

const glob = require("glob");
module.exports = {
  entry: {
     js: glob.sync("./src/**/*.js"),  
  }
}

【讨论】：

谢谢。像黄油一样工作。

【解决方案2】：

如果顺序无关紧要，请使用@Pandelis 的答案。否则，请继续阅读：

通常捆绑包是从require 或import 彼此的文件创建的。想一想：如果 webpack 将所有文件捆绑在一个目录中，它怎么知道哪个应该先出现？

在不改变文件的情况下，你可以做一个新的 JS 文件来导入你需要的所有文件：

#webpack_bundle_me.js

import * as File1 from "./file1.js";
import * as File2 from "./file2.js";
// and so on

这样，您或其他任何人都可以轻松更改顺序，而无需深入了解webpack.config.js。

您也可以在 webpack 配置中执行此操作：https://stackoverflow.com/a/33039902/607407

【讨论】：

非常好的建议兄弟。但似乎@Pandelis 的回答很有魅力。
是的，我只是在演示替代方法，对于一般情况，他的答案是最好的。

【解决方案3】：

新建配置文件：

var path = require('path');
const glob = require("glob");
module.exports = {
 entry: {
     js: glob.sync("./src/**/*.js"),  
  }, 
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

或

var path = require('path');
const glob = require("glob");
module.exports = {
 entry: glob.sync('./src/*.js'), 
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

【讨论】：