KT-MyPage-kintone/webpack.config.js

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const { exec } = require('child_process');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const Dotenv = require('dotenv-webpack');

const basePath = path.resolve('src', 'apps');

// basePath配下の各ディレクトリを複数のentryとする
const entries = glob.sync('**/index.+(js|ts|tsx)', { cwd: basePath }).reduce(
  (prev, file) => ({
    ...prev,
    [path.dirname(file)]: path.resolve(basePath, file),
  }),
  {}
);

module.exports = {
  entry: entries,
  cache: false,
  resolve: {
    // 拡張子を配列で指定
    extensions: [
      '.ts', '.js',
    ],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: './tsconfig.json',
      }),
    ]
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: 3,
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
      }
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  plugins: [
    new Dotenv({ systemvars: true }),
    new ForkTsCheckerWebpackPlugin(),
    // new BundleAnalyzerPlugin(),
    {
      // watchモードのとき再ビルドされたものをアップロードする
      apply: (compiler) => {
        compiler.hooks.afterEmit.tapPromise(
          'upload javascript files',
          (compilation) => {
            if (!compiler.options.watch) return Promise.resolve();

            const emittedFiles = Object.keys(compilation.assets)
              .filter((file) => {
                const source = compilation.assets[file];
                return source.emitted && source.existsAt;
              })
              .map((file) => file.replace('.js', ''));

            const processes = glob
              .sync(`@(${emittedFiles.join('|')})/customize-manifest.json`, {
                cwd: basePath,
              })
              .map((file) => {
                console.log('\nuploading... ', file);
                return exec(
                  `yarn upload ${path.resolve(basePath, file)}`,
                  (err, stdout, stderr) => {
                    if (stdout) process.stdout.write(stdout);
                    if (stderr) process.stderr.write(stderr);
                  }
                );
              });
            return Promise.all(processes);
          }
        );
      },
    },
    // new webpack.DefinePlugin({
    //   'process.env': {
    //     "MYPAGE_BASE_URL": JSON.stringify(process.env.MYPAGE_BASE_URL),
    //     "MYPAGE_TOKEN": JSON.stringify(process.env.MYPAGE_TOKEN),
    //   }
    // }),
  ],
};