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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (117)

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

-- 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成为入口点?

提问于
用户回答回答于

添加上面的答案,因为我无法发表评论。使用该path.basename方法将为您提供干净的,未嵌套的文件名。

const glob = require("glob")
const path = require("path")

const entry = glob
    .sync("src/js/**/*.js")
    .reduce((acc, curr) => {
        return {...acc, [path.basename(curr, ".js")]: curr}
    })

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

使用glob包

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文件并将其添加到条目哈希中

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动