BIOGRAPHYREADME2016.11.09Webpackで複数のファイルをそのままバンドルするこのブログははてなブログからの移行記事です。やりたいことお仕事でページごとに必要なモジュールのみimportしたJSを実装し、それぞれコンパイルしたいという場面があった。イメージ的にはsrc/(pc|sp)/**/*.jsをフォルダ構成やファイル名をそのままpublic/js配下に吐きだすといった感じ。Webpackは基本的に複数ファイルをよしなに1ファイルにバンドルするものなので結構情報が少なくて詰まったのでメモっておく。実装方針Webpackでは複数ファイルをコンパイル対象として、それぞれ特定フォルダに吐き出すといったことをサポートしている。points公式からコードを引用するとこんな感じ。}}こんな感じで頑張ってentryに書いていってもいいんだがこれだと2つ問題がある。ファイルが増えれば増えるほど自分で書き足していかなきゃいけないentryのkey名でファイルが吐きだされるのですべてoutputで定義されたフォルダに吐き出される2つ目の問題この記事がわかりやすく説明してくれてる。webdesign-dackel.comこの記事ではファイルがそこまで多くない想定なので手でentryの項目を書いているが、私のケースだとファイルが大量にあったので以下の方針で設定を試みた。コンパイル対象のファイルパスをvalueとした連想配列を作るそれをentryに渡すコード要するにこんな感じです。この例はsrc/pc/*.jsとsrc/sp/*.jsをpublic/js/配下にフォルダ構成そのままに出力する例です。},}色々省略してますが、まずはコンパイル対象のフォルダを取る部分。glob.sync(`${jsBasePath}/+(${jsCompileFolders.join('|')})/*.js`);ここで同期処理でコンパイルしたいJSファイルの一覧を取ってきてます。[コンパイルするファイル]}となるkey-valueをここで作ります。value;});もっといい方法ありそうなんですが、愚直にkey-valueをオブジェクトに突っ込んでるだけです。あとはこれをwebpackのconfigに渡して終わり。サンプルコード超必要最低限書いたサンプルコード置いておきます。github.comまとめwebpack楽しいぞい。