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

【问题标题】：Webpack retain folder structure on dist folderWebpack 在 dist 文件夹上保留文件夹结构
【发布时间】：2021-03-12 20:55:32
【问题描述】：

我有以下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，但我需要它是 @ 987654328@、/dist/vue/components等）。

有什么想法吗？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

将变量“Allfiles”放入函数中

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

在输出上试试这个函数

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

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

【讨论】：

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