web-dev-qa-db-ja.com

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

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

Webpackを使用して4つの部分に分割します。手動ですべてのファイルを要求する必要はありません。

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

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

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

Webpackまたはこれを行うために誰かが書いたプラグインでこれを行う方法はありますか？

javascriptbuildwebpack
86
ChickenFur

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

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

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

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

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

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

36
ChickenFur

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

// { 
//   './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, /.*/));
3
Steven de Salas

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

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));
1
Alex K

これは私のために働く：

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

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

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

0
jack long