Node.js 如何在网页包条目中添加通配符映射

我需要对脚本文件夹中的所有js文件进行网页打包。我尝试了这个

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      }
    ],
  },
  entry: "./src/scripts/*.js",
  output: {
    path: './src/build',
    filename: '[name].js'
  }
};

我犯了这样的错误

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./s
rc/scripts/* in E:\Web project\ReactJS\react-tutorial
resolve file
  E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.webpack.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.web.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.js doesn't exist
  E:\Web project\ReactJS\react-tutorial\src\scripts\*.json doesn't exist
resolve directory
  E:\Web project\ReactJS\react-tutorial\src\scripts\* doesn't exist (directory d
efault file)
  E:\Web project\ReactJS\react-tutorial\src\scripts\*\package.json doesn't exist
 (directory description file)

它不是在搜索所有的js文件，而是在搜索类似的*.js。请帮我找出我遗漏的内容

Webpack希望

条目

配置是一个，而不是一个

您必须手动或使用此代码段自动列出这些文件

var fs = require('fs'),
    entries = fs.readdirSync('./src/scripts/').filter(function(file) {
        return file.match(/.*\.js$/);
    });

---

然后将其传递到网页包的配置。

条目值应解析为特定文件或特定文件列表

从：

如果传递一个字符串：该字符串将解析为 启动时加载

如果传递数组：启动时加载所有模块。最后 一个是出口

如果您只是试图定义一个模块，请编辑

条目

值以指向主应用程序文件，然后从该文件中要求其他模块

---

如果您真的想捆绑目录中的所有文件，请参阅，对于大多数用例来说，拥有一个或几个入口点应该足够了，但是如果您真的想捆绑目录中的所有文件，您可以使用以下方法：

如下文所述：

---

我在Webpack2.4.1中遇到了一些文件路径问题，所以做了这个。 除了多个条目之外，这还会创建多个.html文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');

function getEntries (){
    return fs.readdirSync('./src/pages/')
        .filter(
            (file) => file.match(/.*\.js$/)
        )
        .map((file) => {
            return {
                name: file.substring(0, file.length - 3),
                path: './pages/' + file
            }
        }).reduce((memo, file) => {
            memo[file.name] = file.path
            return memo;
        }, {})
}

const config = {
    entry: getEntries, 
    output: {
        path: resolve('./public'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            filename: '[name].html',
            template: './pages/_template.html'
        })
    ]
}

---

仅使用

glob.sync

将产生连续的文件名，例如

0.[hash].js

和

1.[hash].js

，因为

entry

要求一个对象的文件名在键中，其位置在值中，但

glob.sync

返回一个数组

以下方法的优点是基于文件名生成具有键和值的对象，您还可以添加其他条目，例如

vendor

和

common

。需要洛达斯

const glob = require("glob");
const _ = require('lodash');

module.exports = {
  entry: Object.assign({},
    _.reduce(glob.sync("./src/*.js"),
      (obj, val) => {
        const filenameRegex = /([\w\d_-]*)\.?[^\\\/]*$/i;
        obj[val.match(filenameRegex)[1]] = val;
        return obj;
      },
    {}),
    {
      vendor: [
        'lodash'
      ]
    }
  ),
  output: {
    filename: '[name].[chunkhash].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

后者将生成以下对象并将其传递给

条目

，前提是我们在

/src

目录中有

index.js

和

app.js

：

{
    index: './src/index.js',
    app: './src/app.js',
    vendor: [ 'lodash' ]
}

---

Thanks@kombucha..Is除了fs，还有别的办法吗？我脑子里想不出来。。。但是就像@duncanhall说的，你确定你需要多个入口点吗？我不知道这是否是他们的情况，但有多个入口点是有意义的。但总的来说，在入口点上就足够了。当然，可以定义多个，但您仍然希望明确地说出它们是什么。否则，您可能会得到大量的入口点和相应的捆绑包，这几乎肯定不是本文所希望的subdirectories@HasanGilak我可以想象，上面的glob是故意这样做的，仅包括根文件。您并不希望Webpack处理所有文件，即使是链上更高模块所需的文件。否。这可以很好地工作，而webpack本身只需要看到import语句就需要更高的依赖性。虽然这有点像“.js”的行为，但对于

css | less | sass |…

（对于我们这些放弃gulp的人来说，是一个全webpack解决方案…）来说，每当我使用glob时，它都会在webpack中给出错误：无效的配置对象，已使用与API架构不匹配的对象初始化Web包。通配符不会导致干净的解决方案。您可以始终拥有一个主文件来导入目录中的所有其他库，并将webpack条目指向它。upvoting-我使用了这种方法，它工作得非常出色。谢谢@Víctor González

{
    index: './src/index.js',
    app: './src/app.js',
    vendor: [ 'lodash' ]
}