package.json

  "name": "gounite-client",
  "version": "2.0.1",
  "main": "src/app.tsx",
  "private": true,
  "description": "Client app for GOunite",
  "author": "Adrien Lemaire",
  "dependencies": {
    "@apollo/client": "^3.0.0-beta.44",
    "@apollo/react-hooks": "^3.1.2",
    "apollo-boost": "^0.4.4",
    "classnames": "^2.2.6",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.10",
    "@types/graphql": "^14.5.0",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "@types/react-router": "^5.1.7",
    "@types/react-router-dom": "^5.1.5",
    "@typescript-eslint/eslint-plugin": "^2.31.0",
    "@typescript-eslint/parser": "^2.31.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-airbnb-typescript": "^7.2.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "html-webpack-plugin": "^4.3.0",
    "html-webpack-template": "^6.2.0",
    "http-proxy-middleware": "^0.20.0",
    "husky": "^2.7.0",
    "lint-staged": "^8.2.1",
    "prettier": "^2.0.5",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^7.0.2",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dashboard": "^3.2.0",
    "webpack-dev-server": "^3.10.3"
  },
  "scripts": {
    "dev": "webpack-dashboard -c magenta --port 3001 -- webpack-dev-server --config ./webpack.dev.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,json,css,md,graphql}": [
      "prettier --write",
      "git add"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

webpack.dev.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const DashboardPlugin = require("webpack-dashboard/plugin");

const DIST_DIR = "dist";
const ASSET_PATH = process.env.ASSET_PATH || "https://localhost:9000/";

const rules = [
  // changed from { test: /\.jsx?$/, use: { loader: 'babel-loader' }, exclude: /node_modules/ },
  {
    test: /\.(t|j)sx?$/,
    use: { loader: "ts-loader" },
    exclude: /node_modules/,
  },

  // add source-map support
  {
    enforce: "pre",
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "source-map-loader",
  },
];

const plugins = [
  new webpack.DefinePlugin({
    "process.env.ASSET_PATH": JSON.stringify(ASSET_PATH),
  }),
  new HtmlWebpackPlugin({
    title: "GOunite: 体験できる仕事図鑑",
    // Required
    inject: true,
    template: require("html-webpack-template"),
    // template: 'node_modules/html-webpack-template/index.ejs',
    // Optional
    appMountId: "app",
    appMountHtmlSnippet:
      '<div class="app-spinner"><i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i></div>',
    headHtmlSnippet:
      "<style>div.app-spinner {position: fixed;top:50%;left:50%;}</style >",
    bodyHtmlSnippet: "<custom-element></custom-element>",
    baseHref: "https://localhost:9000", // TODO: #492
    devServer: "https://localhost:9000",
    googleAnalytics: {
      trackingId: "UA-XXXX-XX", // TODO: #492
      pageViewOnLoad: true,
    },
    meta: [
      {
        name: "GOunite",
        content:
          "GOuniteは、体験できる仕事図鑑です。仕事や企業、体験ストーリーを図鑑のように見た上で、気になった企業へ行き、仕事を体験できます。そしてここが、GOunite仕事図鑑への入り口です。社会に出る前に、キミの将来をさがしにいこう。",
      },
    ],
    mobile: true,
    lang: "ja-JP",
    links: [
      "https://fonts.googleapis.com/css?family=Roboto",
      {
        href: "/favicon.ico",
        rel: "icon",
        sizes: "16x16",
        type: "image/png",
      },
    ],
    // And any other config options from html-webpack-plugin:
    // https://github.com/ampedandwired/html-webpack-plugin#configuration
  }),
  new DashboardPlugin({ port: 3001 }),
];

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "public")],
    compress: false,
    port: 9000,
    hot: true,
    watchContentBase: true,
    https: true,
  },
  context: __dirname, // to find tsconfig.json
  entry: {
    app: "./src/index.tsx",
  },
  output: {
    path: path.resolve(__dirname, DIST_DIR),
    filename: "[name].bundle.js",
    publicPath: ASSET_PATH,
  },
  plugins,
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: { rules },
  target: "web",
};