webpackでTypeScript × Sassの開発環境を構築しよう

ちょっとしたPHPでの個人開発において、webpackでTypeScript × Sassの開発環境を作ったので共有とおさらいを兼ねて解説させていただきます。

以前webpackでTypeScriptの開発環境構築を行った記事があり、そちらで公開したソースコードをベースにハンズオン形式で進めていきます。

webpackでTypeScript開発環境を構築しよう今やフロントエンドエンジニアの必須スキルであるTypeScript。この記事ではwebpackによるTypeScript開発環境構築をハンズオン形式で行なっていきます。...

Contents

動作環境と前提条件
- 動作環境
- 前提条件
ソース
- GitHubリポジトリ
- ディレクトリ構成（完成形、node_modulesを除く）
必要なパッケージのインストール
各種設定ファイルの作成・編集
TypeScriptとSass実行する
おわりに

動作環境と前提条件

動作環境

macOS Monterey v12.3.1
VSCode（テキストエディタ）
Node.js v16.14.2
yarn v1.22.18
npm v8.5.0
Google Chrome（ブラウザ）

前提条件

Node.jsがインストールされていること

ソース

GitHubリポジトリ

完成形
https://github.com/posipan/webpack-ts-sass/tree/main

今回のベースファイル
https://github.com/posipan/webpack-ts-sass/tree/init

ディレクトリ構成（完成形、node_modulesを除く）

コンパイル実行前

.
├── README.md
├── package.json
├── public
│   └── dist
│       ├── index.html
├── src
│   ├── sass
│   │   └── style.scss
│   └── ts
│       ├── addNum.ts
│       └── index.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

コンパイル実行後（ビルド済み）

.
├── README.md
├── package.json
├── public
│   └── dist
│       ├── index.html
│       ├── main.js
│       ├── main.js.map
│       ├── style.css
│       └── style.css.map
├── src
│   ├── sass
│   │   └── style.scss
│   └── ts
│       ├── addNum.ts
│       └── index.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

必要なパッケージのインストール

Node.jsのパッケージマネージャーにはnpmとyarnがありますので、お好きな方をお選びください。今回はyarnで記述していきます。

yarn add -D sass sass-loader css-loader mini-css-extract-plugin

上記コマンド実行により、package.jsonの中身は以下のようになります。

{
  "name": "ts-sass",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "npx webpack serve --mode=development",
    "build": "npx webpack --mode=production"
  },
  "devDependencies": {
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.0",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.2",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

インストールしたパッケージの詳細は以下の通りです。

パッケージ名	説明
sass	Dart製のSassコンパイラー最終的にJavaScriptに変換される
sass-loader	webpackでSassコンパイラーを動かすためのSassローダー
mini-css-extract-plugin	JavaScript化したCSSを抽出してCSSファイルを作成する
css-loader	CSSをJavaScriptにimportできるようにする

各種設定ファイルの作成・編集

先程インストールしたパッケージに関するコードの追記を行なっていきます。

追記コードの詳細はソースコード中に記述しています。

webpack.config.jsの編集

public/dist配下にアウトプットファイルstyle.cssとソースマップファイルが出力されるようにしています。

const path = require('path');

// 追加
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

  output: {
    path: path.join(__dirname, 'public/dist'),
  },

  resolve: {
    extensions: ['.ts', '.js'],
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
      // 追加
      {
        test: /\.(scss|sass|css)$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },

  // 追加
  // webpackの機能拡張
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css', // アウトプットCSSファイル
    }),
  ],

  // 追加
  // ソースマップの作成
  devtool: 'source-map',

  devServer: {
    static: {
      directory: path.join(__dirname, 'public/dist'),
    },
    port: 9000,
  },

  watchOptions: {
    ignored: /node_modules/,
  },
};

Sassファイルの作成とimport

ルートディレクトリからsrc配下にsassフォルダを作成します。

mkdir src/sass

続いて、sassフォルダの中にstyle.scssを作成します。

touch src/sass/style.scss

エントリーポイントのTSファイルにSassを読み込む

今回の場合、エントリーポイントとなるTSファイルはsrc/ts/index.tsです。

こちらに先程作成したstyle.scssをimport文で読み込みます。

// 追加
import '../sass/style.scss';

// addNum関数の読み込みと実行結果のConsole出力
import { addNum } from './addNum';

console.log(addNum(1, 5));

index.htmlにstyle.cssを読み込む

アウトプットファイルであるstyle.cssを読み込みます。

titleやh1も今回の記事用に内容を変えています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpackでTypeScript × Sass開発環境を構築しよう</title>
  <!-- 追加 -->
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h1>webpackでTypeScript × Sass開発環境を構築しよう</h1>
  <script src="./main.js"></script>
</body>
</html>