webpackで複数のエントリーとアウトプットの設定で引っかかったこと

ElectronとTypeScriptを使うためにwebpackを使った。

設定は以下ファイル。

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    target: 'electron-main',
    entry: './src/ts/index.ts',
    output: {
        path: path.join(__dirname, "dist"),
        filename: "main.js"
    },
    module: {
        rules: [{
        test: /\.ts$/,
        use: 'ts-loader'
        }]
    },
    resolve: {
        modules: [
        "node_modules",
        ],
        extensions: [
        '.ts',
        '.js'
        ]
    },
    node: {
        __dirname: false,
        __filename: false
    },
};

module.exports = {
    mode: 'development',
    target: 'electron-renderer',
    entry: path.join(__dirname, 'src', 'ts', 'renderer', 'index'),
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist', 'scripts')
    },
    resolve: {
      extensions: ['.json', '.js', '.ts']
    },
    module: {
      rules: [{
        test: /\.(tsx|ts)$/,
        use: [
          'ts-loader'
        ],
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules'),
        ],
      }]
    },
  };

この状態で、

webpack --watch

を実行しても、２つ目のmodule.exportsしか実行されていない問題に遭遇。

解決策

webpack.config.js

const path = require('path');

const main = {
    mode: 'development',
    target: 'electron-main',
    entry: './src/ts/index.ts',
    output: {
        path: path.join(__dirname, "dist"),
        filename: "main.js"
    },
    module: {
        rules: [{
        test: /\.ts$/,
        use: 'ts-loader'
        }]
    },
    resolve: {
        modules: [
        "node_modules",
        ],
        extensions: [
        '.ts',
        '.js'
        ]
    },
    node: {
        __dirname: false,
        __filename: false
    },
};

const renderer = {
    mode: 'development',
    target: 'electron-renderer',
    entry: path.join(__dirname, 'src', 'ts', 'renderer', 'index'),
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist', 'scripts')
    },
    resolve: {
      extensions: ['.json', '.js', '.ts']
    },
    module: {
      rules: [{
        test: /\.(tsx|ts)$/,
        use: [
          'ts-loader'
        ],
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules'),
        ],
      }]
    },
  };

  module.exports = [
      main, renderer
  ];