ちょっとしたPHPでの個人開発において、webpackでTypeScript × Sassの開発環境を作ったので共有とおさらいを兼ねて解説させていただきます。
以前webpackでTypeScriptの開発環境構築を行った記事があり、そちらで公開したソースコードをベースにハンズオン形式で進めていきます。
![](https://i0.wp.com/posipan.com/wp-content/uploads/2022/05/main_ts-dev.png?resize=320%2C180&ssl=1)
動作環境と前提条件
動作環境
- 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>
TypeScriptとSass実行する
ルートディレクトリから以下のコマンドを実行します。
yarn start
TypeScriptとSassのコンパイル監視が行われます。
以下のURLでブラウザを開きます。
http://localhost:9000/
![](https://i0.wp.com/posipan.com/wp-content/uploads/2022/06/webpack-ts-sass_01.png?resize=852%2C176&ssl=1)
style.scssの編集
style.scssにはまだ何も記述されていないので、以下のコードを追記してください。
h1のテキストカラーを赤くしています。
h1 {
color: #f00;
}
自動コンパイルが実行され、テキストカラーが赤くなりました。
![](https://i0.wp.com/posipan.com/wp-content/uploads/2022/06/webpack-ts-sass_02.png?resize=942%2C169&ssl=1)
index.tsの編集
こちらは前回TypeScript開発環境構築の記事で作成したファイルです。
addNumは引数の足し算をおこなっている関数で、console.logでその結果をブラウザのコンソールエリアに出力しています。
元のコードはconsole.log(addNum(1, 5));
となっており、和である6がコンソールエリアに出力されているかと思います。
以下のように引数を変えて、TypeScriptのコンパイルと結果の出力が行われていることを確認してみましょう。
(省略)
console.log(addNum(5, 5));
自動コンパイルが実行され、和の10が出力されました。
![](https://i0.wp.com/posipan.com/wp-content/uploads/2022/06/webpack-ts-sass_03.png?resize=490%2C153&ssl=1)
ビルドしてアウトプットファイルを出力する
以下のコマンドでビルドを実行し、アウトプットJSファイルとアウトプットCSSファイル、並びにそれぞれのソースマップファイルを出力します。
yarn build
以下のようにファイルが出力されます。
![](https://i0.wp.com/posipan.com/wp-content/uploads/2022/06/webpack-ts-sass_04.png?resize=566%2C308&ssl=1)
おわりに
webpackでTypeScriptとSassの開発環境構築が一緒にできるのは便利ですね!