webpack etc. configuration for Rails application

webpack.config.js

// webpack.config.js for Rails application
// Other configurations:
//   tsconfig.json: https://gist.github.com/labocho/0afa689d18dc5b2d434ec0ff9a6673bb
//   .eslintrc.yml: https://gist.github.com/labocho/b3665e878db2b30b79abe43d5f1e3a25
// Useful scripts:
//   "dev": "rm -rf public/packs && webpack --progress",
//   "build": "rm -rf public/packs && webpack --mode=production",
//   "lint": "eslint app/javascript",
//   "lint-fix": "eslint app/javascript --fix",
//   "watch": "webpack --progress --watch"
// Requirements:
//   yarn add webpack webpack-cli glob webpack-manifest-plugin
//   # Support CSS
//   yarn add mini-css-extract-plugin sass sass-loader css-loader style-loader
//   # Support TypeScript
//   ts: yarn add typescript ts-loader
//   # Support ESLint
//   eslint: yarn add eslint eslint-webpack-plugin @typescript-eslint/parser @typescript-eslint/eslint-plugin
//   # Support Vue
//   vue: yarn add vue vue-loader vue-template-compiler eslint-plugin-vue
//   # Support Pug
//   pug: yarn add pug pug-plain-loader

// app/javascript/packs 下を entry に
// https://inside.pixiv.blog/subal/4615
const glob = require("glob");
const path = require("path");
const packs = path.join(__dirname, "app", "javascript", "packs");
const targets = glob.sync(path.join(packs, "**/*.{js,jsx,ts,tsx}"));
const entry = targets.reduce((e, target) => {
  const bundle = path.relative(packs, target);
  const ext = path.extname(bundle);

  // Input: "application.js"
  // Output: { "application": "path/to/application.js" }
  return {
    ...e,
    [bundle.replace(ext, "")]: target,
  };
}, {});

const {WebpackManifestPlugin} = require("webpack-manifest-plugin");
// // Support CSS
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// // Support ESLint
// const ESLintPlugin = require("eslint-webpack-plugin");
// // Support Vue
// const {VueLoaderPlugin} = require("vue-loader");
// To use global jQuery variable
// const {ProvidePlugin} = require("webpack");

module.exports = (_env, argv) => {
  const isProduction = argv.mode === "production";

  return {
    mode: argv.mode || "development",
    devtool: isProduction ? false : "source-map", // sourcemap を出力する
    entry,
    output: {
      path: path.resolve(__dirname, "public/packs"),
      filename: "[name]-[chunkhash].js",
      clean: true,
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
      modules: [ // import の load path
        "node_modules",
        path.resolve(__dirname, "app/javascript"),
      ],
    },
    module: {
      rules: [
        // // Support CSS
        // {
        //   test: /\.(?:scss|sass|css)$/iu,
        //   use: [
        //     // fallback to style-loader in development
        //     // isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader"
        //     MiniCssExtractPlugin.loader,
        //     // Translates CSS into CommonJS
        //     {
        //       loader: "css-loader",
        //       options: {
        //         sourceMap: true,
        //       },
        //     },
        //     // Compiles Sass to CSS
        //     {
        //       loader: "sass-loader",
        //       options: {
        //         sourceMap: true,
        //       },
        //     },
        //   ],
        // },
        // // Support TypeScript
        // {
        //   test: /\.tsx?$/u,
        //   loader: "ts-loader",
        //   exclude: /node_modules/u,
        //   options: {
        //     appendTsSuffixTo: [/\.vue$/u],
        //   },
        // },
        // // Support Vue
        // {
        //   test: /\.vue$/u,
        //   loader: "vue-loader",
        // },
        // // Support Pug
        // {
        //   test: /\.pug$/u,
        //   loader: "pug-plain-loader",
        // },
      ],
    },
    plugins: [
      new WebpackManifestPlugin({
        fileName: "manifest.json",
        publicPath: "/packs/",
        writeToFileEmit: true,
      }),
      // // Support CSS
      // new MiniCssExtractPlugin({
      //   filename: "[name]-[chunkhash].css",
      // }),
      // // To use global jQuery variable
      // new ProvidePlugin({
      //   $: "jquery/src/jquery",
      //   jQuery: "jquery/src/jquery",
      // }),
      // // Support ESLint
      // new ESLintPlugin({
      //   extensions: ["js", "ts"],
      // }),
      // // Support Vue
      // new VueLoaderPlugin(),
    ],
    performance: {
      hints: false, // ファイルサイズの警告を出さない
    },
  };
};