Javascript 带有动态条目的网页包

我正在尝试用webpack动态加载JS文件，以便更轻松地添加白标签客户。目前，我必须不断更新网页配置，以便每次手动添加他们的文件，但我想将其设置为动态方法，以便在需要时添加JS文件，而不必担心网页

我在webpack.config.js中的脚本

var Encore = require('@symfony/webpack-encore');
var webpack = require('webpack');
var DelWebpackPlugin = require('del-webpack-plugin');
var fs = require('fs');

 //This is how we used to do it before we implemented whitelabels.
 Encore
     .setOutputPath('web/build/')
     .setPublicPath('/build')
     .enableVersioning()

     .autoProvideVariables({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery'
        })

     .addPlugin(new DelWebpackPlugin({
         info: true,
         include: ['**.*']
     }))

     .addEntry('app', './assets/app/js/global.js')
     .addEntry('client1', './assets/app/js/whitelabels/client1.js')
     .addEntry('client2', './assets/app/js/whitelabels/client2.js')

     .enableSassLoader()

     .enableSourceMaps(!Encore.isProduction())
 ;
  module.exports = Encore.getWebpackConfig();

每个客户端在文件夹白标签中都有自己的js。我的目标是不必在每次添加新的白标客户时维护webpack配置

下面是我尝试动态加载文件时的尝试

var whitelabels = './assets/app/js/whitelabels';
var list = [];

fs.readdir(whitelabels, function(err, items) {
    items.forEach(item => {

        Encore
            .setOutputPath('web/build/')
            .setPublicPath('/build')
            .enableVersioning()
            .autoProvideVariables({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            })
            .addPlugin(new DelWebpackPlugin({
                info: true,
                include: ['**.*']
            }))
            .addEntry(item.replace('.js', ''), './assets/app/js/whitelabels/'+ item)
            .enableSassLoader()
            .enableSourceMaps(!Encore.isProduction());

        const otherConfigs = Encore.getWebpackConfig();
        otherConfigs.name = item;
        list.push(otherConfigs);
        Encore.reset();
    })
});
// export the final configuration
module.exports = list;

然而，无论我尝试什么，它总是给我以下的错误

Running webpack ...

/Volumes/git/project/node_modules/webpack/bin/webpack.js:212
            outputOptions.context = firstOptions.context;
                                                 ^

TypeError: Cannot read property 'context' of undefined
    at processOptions (/Volumes/git/project/node_modules/webpack/bin/webpack.js:212:41)
    at yargs.parse (/Volumes/git/project/node_modules/webpack/bin/webpack.js:397:2)
    at Object.Yargs.self.parse (/Volumes/git/project/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/Volumes/git/project/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
error Command failed with exit code 1.

这可能有用

var Encore=require（@symfony/webpack Encore”）；
var webpack=需要（“webpack”）；
var DelWebpackPlugin=require（“DelWebpackPlugin”）；
var fs=要求（“fs”）；
var whitelabels=“./assets/app/js/whitelabels”；
再来一个
.setOutputPath（“web/build/”）
.setPublicPath（“/build”）
.enableVersioning（）
.货币贬值({
$：“jquery”，
jQuery：“jQuery”，
“window.jQuery”：“jQuery”
})
.addPlugin(
新DelWebpackPlugin({
信息：没错，
包括：[“**.*]
})
)
.addEntry（“app“，”/assets/app/js/global.js”）；
fs.readdir（白标签、函数（错误、项）{
items.forEach（item=>{
Encore.addEntry（item.replace（“.js”，”），“/assets/app/js/whitelabels/”+item）
});
});
再来一个
.enablesASloader（）
.enableSourceMaps（！Encore.isProduction（））；
module.exports=Encore.getWebpackConfig（）；

您必须使用synchron方法

  var whitelabels = "./assets/app/js/whitelabels";
  var items=fs.readdirSync(whitelabels);
  items.forEach(item => {
       Encore.addEntry(item.replace(".js", ""), "./assets/app/js/whitelabels/" + item)
  });

---

我是这样做的——你必须调整glob模式和路径以满足你的需要。“粉笔”插件是没有必要的，你可以删除它-我添加了更好的输出它

关键是，您必须同步添加它（如本例中的

glob.sync

）

---

不幸的是，这样做似乎并没有带来任何白色标签。出于某种原因，它似乎完全跳过了foreach循环中的任何内容。但是，当我在控制台上记录items变量时，我可以看到文件夹中的所有.js文件。@killstreet有一个错误，我已经更新了代码。你现在能试试吗？遗憾的是，这似乎都失败了。它不会抛出任何错误，但实际上不会运行循环中添加的文件：（我用一堆Encore.getWebpackConfig（）更新了我的问题，但是我觉得一切都很正常。。。

  var whitelabels = "./assets/app/js/whitelabels";
  var items=fs.readdirSync(whitelabels);
  items.forEach(item => {
       Encore.addEntry(item.replace(".js", ""), "./assets/app/js/whitelabels/" + item)
  });

const chalk = require('chalk');
const glob = require("glob");
const path = require('path');

// add all components recursively as Encore entry
const entryPoints = glob.sync('**/index.js', {
  'cwd': './your/entrypoints/folder'
});

entryPoints.forEach((file) => {
  const filePath = './your/entrypoints/folder/' + file;
  const name = file.replace(/\/index\.js/, '');
  console.log(`adding entry ${chalk.green(name)} located at ${chalk.green(filePath)}`);
  Encore.addEntry(name, filePath);
});