Webpackのビルドをフォルダ構成を変えずに行う

TL;DR.

今回作ったサンプル

はじめに

前回Webpackでビルドするところまでやったけど、
やっぱりファイルまとめたくなかったので色々したのが今回。

準備

前回の状態にしておく。
ちなみにフォルダ構成はこんな感じ。(tssrver→srcにしました。)

.
├── node_modules
├── package-lock.json
├── package.json
└── src
     ├── app.ts
     ├── bin
     │   └── www.ts
     ├── public
     │   ├── images
     │   ├── javascripts
     │   └── stylesheets
     │       └── style.css
     ├── routes
     │   ├── index.ts
     │   └── users.ts
     └── views
         ├── error.jade
         ├── index.jade
         └── layout.jade

webpack.config.jsを修正

各種ファイルを纏めたくは無いので、entryを分けておく。
ついでにフォルダ構成をそのままにしたいので、keyに出力後のファイル名、valueに元ファイルを記載する。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
      'bin/www': path.join(__dirname, 'src/bin/www.ts'),
      'routes/index.js': path.join(__dirname, 'src/routes/index.ts'),
      'routes/users.js': path.join(__dirname, 'src/routes/users.ts'),
      'app.js': path.join(__dirname, 'src/app.ts')
  },
  target: 'node',
  node: {
    // ビルド後の位置を参照したいのでfalseにする
    __dirname: false
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules'
    ],
    extensions: [
      '.ts', '.js'
    ]
  },
  output: {
    // 出力するファイル名(entryのkeyを指定)
    filename: '[name]',
    path: path.join(__dirname, 'dist')
  }
};

ビルド結果後のフォルダ構成はこんな感じ。
一部置いてかれているけど、今回は無視する。
必要に応じて別途コピーすれば問題ないと思う。

.
├── dist
│   ├── app.js
│   ├── bin
│   │   └── www
│   └── routes
│       ├── index.js
│       └── users.js
├── node_modules
├── package-lock.json
├── package.json
└── src
     ├── app.ts
     ├── bin
     │   └── www.ts
     ├── public
     │   ├── images
     │   ├── javascripts
     │   └── stylesheets
     │       └── style.css
     ├── routes
     │   ├── index.ts
     │   └── users.ts
     └── views
         ├── error.jade
         ├── index.jade
         └── layout.jade

まとめ

ようやく分けてビルドすることができた。
ただ、ファイルが増える度にconfigを書き換えなきゃ行けないので、そのうち何か考えたいです。