LoginSignup
18

More than 3 years have passed since last update.

TypeScript + React + Sass + Babelを利用したWebpack環境構築

Last updated at Posted at 2020-02-12

TypeScript + React + Sass + Babel利用したWebpack環境構築

最近, TypeScriptを勉強し始めたので
今回はTypeScript + React + Sass + Babelを利用した
Webpackの環境構築を行っていきたいと思います。

前提

  • ターミナルが利用できる
  • Node.jsを利用環境がある
  • npm, yarnの利用環境がある

環境

  • 2020/2/12 時点での最新モジュール
  • Node v11.10.1
  • ES6+
  • TypeScript v3.7.4
  • React.js v16.12.0
  • Webpack v4.41.2

ファイル構成

ファイル構成は以下の通りです。
スクリーンショット 2020-02-12 10.39.16.png

前準備

以下のpackage.jsonを作成し,各npmモジュールを
npm install もしくは, yarn add package.json
を利用してインストールしてください。

package.json
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "Main.tsx",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-router-dom": "^5.1.3",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "babel-minify-webpack-plugin": "^0.3.1",
    "core-js": "3",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.0",
    "package.json": "^2.0.1",
    "postcss-loader": "^3.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "sass-loader": "^8.0.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.4"
  },
  "devDependencies": {
  }
}

これで環境構築に必要なモジュールが全てnode_modules配下に
インストールされました。

今回はメイン環境構築ですので, ささっとしたい方については
srcディレクトリ配下のファイルMain.tsxについて,
こちらを参照して各ディレクトリ上に作成してください。
https://github.com/olt556/react_hooks_ts_tmp

Webpackの設定

次にWebpackの設定ファイルとなる,
webpack.config.jsを作成していきます。

webpack.config.js
const path = require('path');
// Babelの機能のminifyを利用するため
const BabelMinifyPlugin = require("babel-minify-webpack-plugin");
// ビルドする際にHTMLも同時に出力するため
const HtmlWebpackPlugin = require('html-webpack-plugin');
// CSSをJSにバンドルせずに出力するため
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    // pathの設定についてですがpathモジュールを使う必要は特にはありません。
    entry: path.resolve(__dirname, 'src/Main.tsx'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 8080,
        historyApiFallback: true, // これがないとルーティングできない
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            // scssのローダ設定
            {
                test: [/\.css$/, /\.scss$/],
                exclude: /node_modules/,
                loader: [MiniCssExtractPlugin.loader, 'css-loader?modules', 'postcss-loader', 'sass-loader'],
            },
            // js,ts,tsxのローダ設定
            {
                test: [/\.ts$/, /\.tsx$/, /\.js$/],
                loader: ['babel-loader', 'ts-loader'],
            },
        ],
    },
    plugins: [
        new BabelMinifyPlugin(),
        new HtmlWebpackPlugin({
            publicPath: 'dist', // ビルド後のHTMLの出力先
            filename: 'index.html', //出力するHTMLのファイル名
            template: 'src/html/index.html', //出力するためのHTMLのテンプレート
        }),
        new MiniCssExtractPlugin({
            publicPath: 'dist', // ビルド後のCSSの出力先
            filename: 'app.css', //出力するCSSのファイル名
        }),
    ],
}

webpack.config.jsは以上のようになります。
ちなみに, ローダの設定についてですが,
loader: ['babel-loader', 'ts-loader']
の場合, ts-loaderbabel-loaderの順に読み込まれます。

Babelの設定

Babelの設定は .babelrc に記述していきます。

{
    "presets": [
        ["@babel/preset-env", { //babelの設定
            "useBuiltIns": "usage",
            "corejs": 3 // polyfill用の設定
        }],
        "@babel/preset-react", // react用のbabelの設定
        ["minify",{}] // minifyの設定
    ]
}

TypeScriptの設定

続いてTypeScriptのトランスパイル(コンパイル)設定をtsconfig.json
記述してきます。

tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "allowJs": true,
        "strict": true,
        "module": "ES6",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ],
}

各々の compilerOptions のオプションについては,
こちらを参照するといいかもしれません。
https://qiita.com/ryokkkke/items/390647a7c26933940470

AutopreFixerの設定

AutopreFixer はPostCSSの機能ですので,
利用できるようPostCSSの設定をpostcss.config.jsに記述していきます。

postcss.config.js
module.exports = {
    plugins: [
        require("autoprefixer")({
            grid: "autoplace",
            browsersList: ["ie >= 11"]
        })
    ],
};

ビルドについて

以上の設定ファイルを作成したのち,
npm run build を実行することで,
エントリーポイントであるMain.tsxsrc配下のファイル
読み込んでビルドを行い, dist以下に出力することができます。

また, npm run start でリアルタイムでビルドを行い,
出力されたファイルが読み込まれた, ローカルサーバが
htttp://localhost:8080 で起動します。

おわりに

間違えや質問などありましたら,
お気軽にコメントしていただけると幸いです。
今回はTypeScriptのテンプレートについては端折っているため,
そちらの記述方法などは,
GitHubを参照していただけたらと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18