webpack4 + TypeScript + SCSS構成でCSSをJSに含めないようにする
個人的なプロジェクトでサーバサイドだけでなくクライアントサイドもこれまで使ったことがないツールを使ってみようと思い、タイトルのような構成にしてみました。
ただ、SPAではないのとHTTP/2を考えてJSのサイズを小さくしたかったのでCSSをJSから分割しました。
その設定をまとめました。
動作環境
ちょっとnodeのバージョンが古いですが、これでも動作しています。
Widnows 10 Pro
node v8.11.3
ディレクトリ構成
今回のディレクトリ構成は以下のようになります。
├─wwwroot │ ├─js │ └─css ├─scss │ login.scss ├─ts │ login.ts ├─package.json ├─postcss.config.js ├─tsconfig.json └─webpack.config.js
webpackを実行するとwwwroot/js以下にJavaScriptが出力され、wwwroot/css以下にcssが出力されるようになります。
パッケージのインストール
今回はwebpackなどはグローバルインストールではなく、ローカルインストールにします。
npm i -D webpack webpack-cli typescript ts-loader sass-loader postcss-loader node-sass css-loader mini-css-extract-plugin autoprefixer
webpack-cliはwebpack4からコマンド実行時に必要なパッケージになります。
mini-css-extract-pluginがCSSに分割するためのプラグインです。
webpack3までは「extract-text-webpack-plugin 」を使用していましたが、以下の問題がありmini-css-extract-pluginにするようになっています。 github.com
webpack.config.jsの作成
webpack.config.jsをルート直下に作成します。
webpack4 + TypeScript + SCSS構成のwebpack設定（CSSはJSに含め ...
tsconfig.json
webpack4 + TypeScript + SCSS構成のTypeScriptコンパイル設定
npm run の設定
npm run webpack:devやnpm run webpack:prodを実行するとwebpackが実行されるようにします。
scriptsを以下のように設定します。
"scripts": {
"webpack:dev": "webpack --mode development",
"webpack:prod": "webpack --mode production"
},
package.jsonの全体はこちら
webpack4 + TypeScript + SCSS構成
TypeScriptを用意する
実行のベースとなるTypeScriptのファイルを準備します。
今回はlogin.tsというファイル名にします。
// 取り込むSCSSを指定
import '../scss/login.scss'
console.log('aaaaa')
SCSSを配置
/** 基本文字色を設定 */
body {
color: #FF0000;
}
div.nav {
flex: content;
}
webpackを実行
コマンドプロンプトからnpm run webpack:devを実行するとwwwroot以下がこのようになります。
├─wwwroot
│ │
│ ├─js
│ │ main.js
│ │ main.js.map
│ │
│ └─css
│ main.css
│ main.css.map
│
└─scss
main.scss
login.scss
entrypointのキー名と同じ名前のjsとcssがソースマップ込みで作成されているのがわかります。
あとは利用するhtmlファイルがこれらを読み込むだけでOKです。
感想
webpack4が正式リリースされて間もないということもあり、cssの分割の情報がかなり錯綜していました（extract-text-webpack-pluginを使うかextract-text-webpack-plugin@nextになっているのがほとんど）。
