TypeScript + Webpack + Webpackプラグイン+ BrowserSync + ESLint + Prettier 導入メモ

how2ts.md

0. Install Node.js, Yarn, VSCode, VSCodeExtention: ESLint, Prettier
1. yarn add -D npm-run-all rimraf browser-sync typescript webpack webpack-cli ts-loader html-webpack-plugin style-loader css-loader file-loader
2. Add tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node",
    "lib": ["es2019", "dom"],
    "resolveJsonModule": true
  }
}

3. Add webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
  dist: `${__dirname}/dist`,
  title: "title",
//  favicon: `${__dirname}/favicon.ico`,
  favicon: void 0,
  splitSize: void 0,
}
module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    main: "./src/index.ts"
  },
  optimization: {
    splitChunks: {
      maxSize: config.splitSize,
      name: "libs",
      chunks: "initial"
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: config.title,
      favicon: config.favicon
    })
  ],
  output: {
    path: config.dist,
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif|svg|ogg|mp3|wav|mpe?g|webm)$/i,
        loader: "file-loader",
        options: {
          name: "[contenthash].[ext]"
        }
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
};

4. Add index.html

<p>Redirect...</p>
<script>
  const dist = "dist";
  window._redirect = () => (location.href = `./${dist}/index.html`);
  window._fn = () => {
    setTimeout(() => {
      fetch(`/${dist}/`).then(x => {
        if (x.ok) {
          setTimeout(window._redirect, 1000);
          return;
        }
        window._fn();
      });
    }, 1000);
  };
  window._fn();
</script>

5. Add bs-config.js

module.exports = {
  files: "./dist/**/*",
  watch: true,
  server: true
};

6. Modify package.json

{
  "scripts": {
    "start": "run-p watch serve",
    "build": "rimraf ./dist && webpack",
    "watch": "rimraf ./dist && webpack -w",
    "serve": "browser-sync start --config ./bs-config.js"
  }
}

7. Add .eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": { "browser": true, "node": true, "es6": true },
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {}
}

8. Add .eslintignore

webpack.config.js

9. Add .vscode/setting.json

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  "editor.formatOnSave": false,
  "prettier.semi": true,
  "[json]":{
    "editor.formatOnSave": true
  },
  "[jsonc]":{
    "editor.formatOnSave": true
  },
  "[markdown]":{
    "editor.formatOnSave": true
  }
}

10. Add @types/assets.d.ts

// example: import * as image from "./image.png";
declare module "*.png";
declare module "*.jpeg";
declare module "*.jpg";
declare module "*.gif";
declare module "*.svg";
declare module "*.ogg";
declare module "*.mp3";
declare module "*.wav";
declare module "*.mpg";
declare module "*.mpeg";
declare module "*.mp4";
declare module "*.webm";

11. Add ./src/index.ts

const div = document.createElement("h1");
div.innerText = "Hello, World!";
document.body.appendChild(div);