requireステートメントなしでwebpackを使用してディレクトリ内のすべてのファイルをロードする方法

アプリの4つのサブディレクトリに分割された大量のJavaScriptファイルがあります。うなり声で私はそれらすべてを取得し、1つのファイルにコンパイルします。これらのファイルにはmodule.exports関数がありません。

Webpackを使用して4つの部分に分割したいと思います。手動で行ってすべてのファイルを要求したくありません。

コンパイル時にディレクトリツリーをウォークし、すべての.jsファイル名とパスを取得し、サブディレクトリ内のすべてのファイルを要求して、それを出力に追加するプラグインを作成したいと思います。

各ディレクトリのすべてのファイルをモジュールにコンパイルして、エントリポイントファイルから必要とするか、http： //webpack.github.io/docs/plugins.htmlで言及されているアセットに含めることができます。

新しいファイルを追加するときは、正しいディレクトリにドロップして、それが含まれることを確認したいだけです。

これを行うために誰かが作成したwebpackまたはプラグインでこれを行う方法はありますか？

これは私がこれを達成するためにしたことです：

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));

私のアプリファイルには、必要なものを入れてしまいました

require.context(
  "./common", // context folder
  true, // include subdirectories
  /.*/ // RegExp
)("./" + expr + "")

この投稿の礼儀：https : //github.com/webpack/webpack/issues/118

これですべてのファイルが追加されます。私はhtmlとcssのローダーを持っています。

フォルダ内のすべてのファイルのマップはどうですか？

// { 
//   './image1.png':  'data:image/png;base64,iVBORw0KGgoAAAANS',
//   './image2.png':  'data:image/png;base64,iVBP7aCASUUASf892',
// }

これを行う：

const allFiles = (ctx => {
    let keys = ctx.keys();
    let values = keys.map(ctx);
    return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
})(require.context('./path/to/folder', true, /.*/));

現在のフォルダー内のすべての画像のマップを取得する方法の例。

const IMAGES_REGEX = /\.(png|gif|ico|jpg|jpeg)$/;

function mapFiles(context) {
  const keys = context.keys();
  const values = keys.map(context);
  return keys.reduce((accumulator, key, index) => ({
    ...accumulator,
    [key]: values[index],
  }), {});
}

const allImages = mapFiles(require.context('./', true, IMAGES_REGEX));

@splintorにすべてのメリット（ありがとう）。

しかし、これは私自身の派生バージョンです。

利点：

• エクスポートされるモジュールは{module_name: exports_obj}オブジェクトの下に収集されます。
  • module_nameは、そのファイル名から作成されます。
  • ...拡張子なしで、スラッシュをアンダースコアに置き換えます（サブディレクトリスキャンの場合）。
• カスタマイズを容易にするためにコメントを追加しました。
  • つまり、ルートレベルのモジュールに手動で必要なファイルがある場合などは、サブディレクトリにファイルを含めないようにすることができます。

編集：私のように、モジュールが通常のjavascriptオブジェクト（少なくともルートレベル）以外のものを返さないと確信している場合は、元のディレクトリ構造を複製して「マウント」することもできます（コード（ディープバージョン）最後のセクション）。

コード（オリジナルバージョン）：

function requireAll(r) {
    return Object.fromEntries(
        r.keys().map(function(mpath, ...args) {
            const result =  r(mpath, ...args);
            const name = mpath
                .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
                .replace(/\//g, '_') // Relace '/'s by '_'s
            ;
            return [name, result];
        })
    );
};
const allModules = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

例：

最終的なサンプル出力console.log(allModules);：

{
  main: { title: 'Webpack Express Playground' },
  views_home: {
    greeting: 'Welcome to Something!!',
    title: 'Webpack Express Playground'
  }
}

ディレクトリツリー：

models
├── main.js
└── views
    └── home.js

コード（ディープバージョン）：

function jsonSet(target, path, value) {
    let current = target;
    path = [...path]; // Detach
    const item = path.pop();
    path.forEach(function(key) {
        (current[key] || (current[key] = {}));
        current = current[key];
    });
    current[item] = value;
    return target;
};
function requireAll(r) {
    const gather = {};
    r.keys().forEach(function(mpath, ...args) {
        const result =  r(mpath, ...args);
        const path = mpath
            .replace(/(?:^[.\/]*\/|\.[^.]+$)/g, '') // Trim
            .split('/')
        ;
        jsonSet(gather, path, result);
    });
    return gather;
};
const models = requireAll(require.context(
    // Any kind of variables cannot be used here
    '@models'  // (Webpack based) path
    , true     // Use subdirectories
    , /\.js$/  // File name pattern
));

例：

このバージョンを使用した前の例の結果：

{
  main: { title: 'Webpack Express Playground' },
  views: {
    home: {
      greeting: 'Welcome to Something!!',
      title: 'Webpack Express Playground'
    }
  }
}

これは私のために働きます：

function requireAll(r) { r.keys().forEach(r); } 

requireAll(require.context('./js/', true, /\.js$/));

注：これには、。/ js /のサブディレクトリに.jsファイルが再帰的に必要になる場合があります。