Webpack 4：具有动态输出文件名的 glob 条目答案

【问题标题】：Webpack 4: glob entry with dynamic output filenameWebpack 4：具有动态输出文件名的 glob 条目
【发布时间】：2020-08-24 23:51:37
【问题描述】：

我正在尝试确定是否可以从 glob 条目为 webpack 输出目录设置动态文件名。

例如

entry: {
        'layout': glob.sync('./src/components/layout/**/*.js'),
        'sections': glob.sync('./src/components/sections/**/*.js'),
        'snippets': glob.sync('./src/components/snippets/**/*.js'),
},
output: {
        filename: './assets/bundle.[name].js',
        path: path.resolve(__dirname, 'dist'),
}

会输出

bundle.layout.js
bundle.sections.js
bundle.sn-ps.js

是否可以创建一个返回类似内容的输出？

/layout/bundle.[文件名].js
/sections/bundle.[文件名].js
/sn-ps/bundle.[文件名].js

【问题讨论】：

标签： javascript webpack webpack-4

【解决方案1】：

此解决方法适用于我正在尝试做的事情。我们可以在条目上执行一些功能，而不是弄乱输出。

entry: glob.sync('./src/components/**/*.js').reduce((acc, path) => {
    const entry = path.replace(/^.*[\\\/]/, '').replace('.js','');
    acc[entry] = path;
    return acc;
  }, {}),

【讨论】：