Webpack Resolve all Files in the src folder

Question

I have not used webpack much so this could be a simple or complex issue I'm not sure.

History

In the past my team has been using a simple and yet power method of flattening the src folder structure into a single folder with all our files to resolve the JS and HTML template imports. Once we came to the terms with the fact that folder structures are for humans only this made sense.

The Benefit is we can change the entire folder structure all at once without changing any code. So we can keep things as flat as possible until it made sense and when the time came to break things up we just did it and without changing a single line of code.

How we did this

We pulled this method off with Gulp and gulp-flatten and making sure all files had a verbose and unique name then resolved the files from the output. It has worked out great for us.

Problem

We are trying to replicate this same pattern with Webpack but we just can't figure it out. We have been looking into alias but we have yet to find something that flattens or just resolves all file in the src directory.

Answer 1

If you just want to copy all files and flatten them like gulp-flatten, you can use copy-webpack-plugin with the flatten option.

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

But this won't resolve anything in the files.
You can also define every file as an entry point for webpack, this will flatten them as well and will use normal loaders.

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