webpackに複数の動的エントリスクリプトがありますか？

Question

だが、私はこのような構造に（共通libフォルダから、各種のlibs /ユーティリティをインポートされます）各script.jsをバンドルして出力するのWebPACKを設定することができますどのようにこの

app/ 
    modules/ 
     module1/ 
     <other files> 
     script.js 
     module2/ 
     <other files> 
     script.js 
     module3/ 
     <other files> 
     script.js 
    lib/ 
     <some common/shared scripts to import from> 
public/ 
    js/ 

のようなアプリの構造を持っているとしましょうか？

public/js/module1/script.js 
public/js/module2/script.js 

ただし、各エントリファイルを個別に定義する必要はありませんか？ gulpのようなものは/**/*.jsという構文ではどうですか？

私の目標は、新しいモジュール/コンポーネントを追加するたびにwebpack.config.jsファイルを更新する必要がないことです。

Answer 1

webpack.config.jsにglobパッケージがあり、entryとoutputを設定する必要があります。 例ルートディレクトリのwebpack.config.js。

var webpack = require('webpack'); 
var glob = require('glob'); 

//Generate object for webpack entry 
//rename './app/modules/module1/script.js' -> 'module1/script' 
var entryObject = glob.sync('./app/modules/**/script.js').reduce(
    function (entries, entry) { 
     var matchForRename = /^\.\/app\/modules\/([\w\d_]+\/script)\.js$/g.exec(entry); 

     if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') { 
      entries[matchForRename[1]] = entry; 
     } 

     return entries; 
    }, 
    {} 
); 

module.exports = { 
    ... 
    entry: entryObject,//{'moduleName/script': './app/modules/moduleName/script.js', ...} 
    output: { 
     path: __dirname + '/public/js', 
     filename: '[name].js'//'moduleName/script.js', [name] - key from entryObject 
    } 
    ... 
}; 

「『をFS』を解決することはできません」のようなあなたはFSとエラーになります場合は、他のentryObjectを使用してパブリックscript.jsに<other files>からあなたのファイルをバンドルすることができ、オプションも

node: { 
    fs: "empty" 
} 

追加。

var entryObject = glob.sync('./app/modules/**/*.js').reduce(
    function (entries, entry) { 
     var matchForRename = /^\.\/app\/modules\/([\w\d_]+)\/.+\.js$/g.exec(entry); 

     if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') { 
      var entryName = matchForRename[1] + '/script'; 

      if (typeof entries[entryName] !== 'undefined') { 
       entries[entryName].push(entry); 
      } else { 
       entries[entryName] = [entry]; 
      } 

     } 

     return entries; 
    }, 
    {} 
);