webpack5でReact&Typescript環境構築

こんにちは、久々にNext.jsを使わないプロジェクトがスタートしたので、技術ログを書き起こしました。

まずは、webpack5のインストールしました。

参考ドキュメント https://webpack.js.org/guides/installation/#root

$ npm install --save-dev webpack webpack-cli webpack-merge

webpack.common.jsを作成しました。

const path = require('path');

module.exports = {
  entry: {
    app: './app/index.tsx',
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: '[name].js'
  },
};

開発用のwebpack.dev.jsを作成しました。

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
});

本番用のwebpack.prod.jsを作成しました。

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map'
});

続いてreactをinstallします。

$ npm install react react-dom

続いてtypescriptをinstallします。

$ npm install --save-dev typescript

続いて、tsconfig.json作成します。

今回はこちら（https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json）を参考に一部修正し作成しました。

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

Reactの型ファイルをinstallします。

$ npm install --save-dev @types/react

続いてwebpack用にts-loaderをinstallします。

$ npm install --save-dev ts-loader

webpack.common.jsにもts-loaderを追記します。

また、resolve.extensionsにも追記しました。

const path = require('path');

module.exports = {
  entry: {
    app: './app/index.ts',
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: '[name].js'
  },

  module: {
    rules: [
      { // 追記しました
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ]
  },

  resolve: {
    extensions: ['.tsx', '.ts'],　// 追記しました
  },
};

tsxファイルを作成します。

tsxファイルを作成します。
import React from "react"

const Test: React.VFC = () => {
  return <div>Test!!!!</div>
}

では、一旦お試し動作確認をします。

package.jsonのscriptsに下記を追加しました。

"start": "webpack --config webpack.dev.js",

$ npm start

無事に動作しました。次回はeslintとstyled-component、storybookなどを追加したいと思います。

ここまでお読みくださりありがとうございました。