Webpack解析src文件夹中的所有文件

Question

我没有使用过webpack，所以这可能是一个简单或复杂的问题，我不确定。

历史

在过去，我的团队一直在使用一种简单而强大的方法将src文件夹结构展平到一个文件夹中，其中包含我们所有文件以解析JS和HTML模板导入。一旦我们达到了文件夹结构仅供人类使用的条款，这才有意义。

好处是我们可以一次更改整个文件夹结构而无需更改任何代码。因此，我们可以保持尽可能平坦的东西，直到它有意义，当时间到了解决时我们只是做了它而没有改变一行代码。

我们是如何做到的

我们使用Gulp和gulp-flatten取消了此方法，并确保所有文件都具有详细且唯一的名称，然后从输出中解析文件。它对我们来说非常好。

问题

我们正在尝试使用Webpack复制这个相同的模式，但我们无法弄明白。我们一直在调查alias，但我们还没有找到一些可以解决或仅解析src目录中所有文件的内容。

Answer 1

如果您只想复制所有文件并将其展平为gulp-flatten，则可以将copy-webpack-plugin与展平选项一起使用。

[
    new CopyWebpackPlugin([
        { from: 'src/**/*', to: 'dest/', flatten: true }
    ], options)
]

但这不会解决文件中的任何问题 您还可以将每个文件定义为webpack的入口点，这也会使它们变平并使用普通的加载器。

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',
        },
    };
};