Webpack解決src文件夾中的所有文件

Question

我沒有太多使用webpack，所以我不確定這可能是一個簡單或復雜的問題。

歷史

過去，我的團隊一直在使用一種簡單而強大的方法來將src文件夾結構與我們所有的文件壓平到一個文件夾中，以解決JS和HTML模板導入問題。 一旦我們以文件夾結構是針對人類的事實為條件的，這才有意義。

好處是我們可以一次更改整個文件夾結構，而無需更改任何代碼。 因此，我們可以使事情盡可能平整，直到有道理為止，而當需要將事情分解時，我們只需要做，而無需更改任何代碼。

我們如何做到的

我們使用Gulp和gulp-flatten提取了此方法，並確保所有文件都具有冗長且唯一的名稱，然后從輸出中解析文件。 它對我們非常有用。

問題

我們正在嘗試使用Webpack復制相同的模式，但我們無法弄清楚。 我們一直在研究別名，但尚未找到能使src目錄中的所有文件變平或僅解析的文件。

Answer 1

如果您只想復制所有文件並像gulp- flatten一樣將它們展平，則可以將copy-webpack-plugin與flatten選項一起使用。

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