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