webpack - 是否可以为 webpack 配置中的每个文件夹动态创建入口点？

Question

这是我当前的文件夹结构:

-- src
   -- js
      -- page 1
         -- index.js
         -- actions
         -- components
         -- reducers
      -- page 2
         -- index.js
         -- actions
         -- components
         -- reducers
      -- page 3
         -- index.js
         -- actions
         -- components
         -- reducers

这是我的 webpack.config.js:

module.exports = {
    entry: {
        page1: './src/js/page1/index.js',
        page2: './src/js/page2/index.js',
        page3: './src/js/page3/index.js',
    },
    output: {
        path: './assets/javascripts',
        publicPath: '/assets/',
        filename: '[name].js'
    }
}

因此，每次创建新页面时，我都必须在条目对象中添加另一行。这可能会变得非常大而且非常困惑。

那么有没有办法让 webpack 循环遍历/src/js/文件夹中的所有文件夹，并自动将相应文件夹中的 index.js 作为入口点？

Answer 1

使用glob package :

const glob = require("glob");

const entry = glob.sync("src/js/**/*.js")
    .reduce((x, y) => Object.assign(x, {
        [y]: y,
    }), {});

module.exports = {
    entry,
    output: {
        path: './assets/javascripts',
        publicPath: '/assets/',
        filename: '[name].js'
    }
}

这会迭代整个文件夹结构并获取每个 js 文件并将其添加到条目哈希中