webpackでディレクトリ構造を維持する

やりたいこと

• webpackを利用して各ページ用に1ファイルずつまとめたい。
• ディレクトリ構造を維持したまま決まったファイル名のパターンでファイルをまとめたい。

src/
├── js
│   ├── testdir
│   │   ├── testmain.js
│   │   └── testsub.js
│   ├── testmain.js
│   └── testsub.js
└── ts
    ├── testdir
    │   ├── testmain.ts
    │   └── testsub.ts
    ├── testmain.ts
    └── testsub.ts

dist/
├── testdir
│   └── testmain.js
└── testmain.js

---

globで複数のファイルをentryに指定する

参考： webpackのentryファイルを複数指定、globパッケージの使い方

globを利用して複数のファイルを指定する。

[webpack.config.js]

glob.sync("./src/js/**/*.js"
    ).map(function (key) {
        entries[key] = key;
    }
);

module.exports = {
    module: {
        ...
    entry: entries,
        ...
    }
}

dist/
└── src
    └── js
        ├── testdir
        │   ├── testmain.js
        │   └── testsub.js
        ├── testmain.js
        └── testsub.js

出力フォルダがおかしいため調整する。

[webpack.config.js]

const srcDir = "./src/js/";
glob.sync("./src/js/**/*.js"
  ).map(function (key) {
      entries[path.relative(srcDir, key)] = key;
    }
);

module.exports = {
    module: {
        ...
    entry: entries,
        ...
    }
}

dist/
├── testdir
│   ├── testmain.js
│   └── testsub.js
├── testmain.js
└── testsub.js

ファイル名をワイルドカードでパターン指定する。

[webpack.config.js]

const srcDir = "./src/js/";
glob.sync("./src/js/**/*main.js"
  ).map(function (key) {
      entries[path.relative(srcDir, key)] = key;
    }
);

module.exports = {
    module: {
        ...
    entry: entries,
        ...
    }
}

dist/
├── testdir
│   └── testmain.js
└── testmain.js