Webpack 在 dist 文件夹上保留文件夹结构

Question

我有以下src文件夹结构（可能会改变）：

- src/
  - vue/
    - classes/
    - components/
      -inputs/

这只是一个例子。 src文件夹可能有x内部文件夹并且是递归的。

我需要编写一个 webpack 代码，将完全相同的文件夹结构输出到文件夹前缀dist而不事先知道文件夹结构是什么（代码应该是自动的）。

这是我尝试过的：

var compiler = function(sourcePath, buildPath) {
    return {
        entry: glob.sync(sourcePath).reduce((files, file, index) => {
            const filename = file.replace(/^.*[\\\/]/, '').replace(/\.[^/.]+$/, "")
            Allfiles[filename] = file

            Allfiles = Object.assign({}, Allfiles);
    
            return Allfiles
        }),

        output: {
            path: buildPath,
            filename: '[name].js',
        },
        
        ...
}

module.exports [
   ...,
   compiler(path.resolve(__dirname, 'src/vue/**/*.js'), path.resolve(__dirname, 'dist')),
]

它适用于入口点（递归查找所有文件并对其进行操作），但是 output 始终位于 dist 上，没有任何文件夹结构（所有文件都在同一路径上/dist ，但我需要它是/dist/vue ， /dist/vue/components等）。

有任何想法吗？

Answer 1

将变量“Allfiles”放入 function

如果您使用节点 ^12+ 将“文件名”更改为“块文件名”

并在 output 上尝试此功能

output: {
        path: buildPath,
        filename: function(pathData) {
            var src = new RegExp("[^*]*")
                .exec(sourcePath)[0]
                .replace(/\\/g, "/");

            return pathData.chunk.entryModule.rawRequest.replace(src, "");
        }
    },