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')),
]

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

有什么想法吗？

Answer 1

将变量“Allfiles”放入函数中

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

并在输出上试试这个功能

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

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

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

1 个答案: