Webpack 4：具有動態輸出文件名的 glob 條目

Question

我想弄清楚是否可以從 webpack 輸出目錄的 glob 條目中設置動態文件名。

例如

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.snippets.js

是否可以創建一個將返回這樣的輸出？

• /layout/bundle.[文件名].js
• /sections/bundle.[文件名].js
• /snippets/bundle.[文件名].js

Answer 1

此解決方法適用於我正在嘗試做的事情。 我們可以在條目上執行一些功能，而不是弄亂輸出。

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