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

Question

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

Answer 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.

您还可以将函数作为条目传递以执行更复杂的操作。

修改
例如，此脚本将对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',
        },
    };
};

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