Webpack将项目中的所有js文件构建成多个输出文件答案

【问题标题】：Webpack build all js files in project to multiple output filesWebpack将项目中的所有js文件构建成多个输出文件
【发布时间】：2018-03-08 09:37:58
【问题描述】：

我正在尝试更改我的 webpack 配置文件以将项目中的所有 js 和 jsx 文件处理为多个输出文件（输出文件名应该是入口文件名）。我没有找到任何简单的解决方案。

【问题讨论】：

标签： webpack webpack-2

【解决方案1】：

您可以创建多个入口文件，并将名称保留在输出文件中。

entry: {
    src: './src/app.js',
    foo: './src/foo.js',
},
output: {
    path: __dirname + '/dist',
    filename: '[name].js',
},

来自文档：

If an object is passed, each key is the name of a chunk, and the value 
describes the entrypoint for the chunk.

你也可以传递一个函数作为入口来做更复杂的事情。

编辑：
例如，此脚本将 glob src 目录中的所有 js 文件，并为每个文件创建一个入口点。

const glob = require('glob');

module.exports = () => {

    return {
        mode: 'development',
        entry: () => {
            return glob.sync('./src/*.js').reduce((pre, cur) => {
                pre[cur.replace(/^.*[\\\/]/, '').split('.')[0]] = cur;
                return pre;
            }, {});
        },
        output: {
            path: __dirname + '/dist',
            filename: '[name].js',
        },
    };
};

你可以稍微清理一下正则表达式

【讨论】：

是的，但我的目标是：当开发人员向项目添加新的 jsx 文件时，他不需要更改配置文件。所以我不能明确写文件路径...
你必须更具体一点，我才能帮助你。什么不起作用，你有什么错误吗？
输出文件名是0...并且没有多个输出文件。我将指出我的目标，我希望 dist 中的子文件夹将是我的子文件夹名称，而 jsx 文件将位于这些子文件夹中。知道为什么输出名称为 0 吗？谢谢！
你能试试这个，看看它是否有效。 github.com/lukas-reineke/webpack-glob-example