TypeScript + webpack 個別tsconfig.jsonを使って複数の出力

はじめに

https://qiita.com/twinemarron/items/7adca7b911caa2718823
TypeScriptとwebpackを使って、サーバーとフロントが同じ感じにかけたら素敵だなぁっと思い、調べてみるとできるみたい。すごくいい。

ただ、tsconfogが同じものを使っているがね。
フロントとサーバーサイドを切り分けるわけだし。
なんか分けることができないの？

解決方法

webpack.config.jsonのmodule.exportsを配列に入れる。

webpack.config.json

const path = require('path');
const publicIndex = {
    mode: 'development',
    entry: './src/public/index/main.ts',
    devtool: 'source-map',
    output: {
        path: path.join(__dirname, "dist/public/script"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.ts$/,
            loader: "ts-loader",
            options: {
                configFile: "src/public/index/tsconfig.json",
            }
        }]
    },
    resolve: {
        extensions: [
            '.ts'
        ],
    },
};
const server = {
    mode: 'development',
    entry: './src/server/main.ts',
    devtool: 'source-map',
    target: 'node',
    output: {
        filename: 'server.js',
        path: path.resolve(__dirname, 'dist/')
    },
    module: {
        rules: [{
            test: /\.ts$/,
            loader: 'ts-loader',
            options: {
                configFile: 'src/server/tsconfig.json',
            },
        }],
    },
    resolve: {
        extensions: ['.ts', '.js', '.json'],
    }
};
module.exports = [publicIndex, server];

git

サンプルコード
https://github.com/kawamurashin/typescript_webpack_multiple_output

参考

webpackで複数のエントリーとアウトプットの設定で引っかかったこと
https://qiita.com/niihara_megumu/items/38b3171c6fc751f28939

なるほど、すごくいい。これにtsconfigを足したら、うまく行った

How to create multiple output paths in Webpack config
https://stackoverflow.com/questions/35903246/how-to-create-multiple-output-paths-in-webpack-config