JavaScriptとSCSSそれぞれを別ファイルにコンパイルする方法(Windows)

JavaScriptとSCSSそれぞれを別ファイルにコンパイルする方法(Windows)

Html、JavaScriptとSCSSを使ってWebサイト制作を行っている人へ

webpackでjsをバンドルするとき、SCSS(CSS)も一緒に挿入される設定をしてることが多いのではないかな?

私の場合、一緒にせず、JSはJSのみでファイルにバンドル、SCSSはCSSファイルにして別ファイルに書き出して運用することが多いです。

私と同じようにJSファイルとCSSファイルを分けて運用しようと思っているが、どうするの?
と思ってこのページにたどり着いた人は是非下記の内容をご活用ください。

私の備忘録としてブログに残しておきます。

JSの設定→SCSSの設定、の順に進めていきます。

今回はWindows11で解説してます。またnpmコマンドで進めていますので、yarnコマンドご使用の場合は置き換えてください。(2022年7月現在)

Node.jsがインストール済みが前提です

まだの人は先にNode.jsをインストールください
hidemitsu.com/blog/418.html

まずは、制作用のフォルダを作成します

JS環境を作成

VSCodeエディターのターミナルで進めていきます

先ほど作成したフォルダ(js-basic)に移動します

package.jsonを作成

npmのパッケージ情報を記述するpackage.jsonファイルが作成されます

関連パッケージのインストール



webpack:webpack 本体。複数のファイルを一つにバンドルする
webpack-cli:webpack のコマンドラインツール
webpack-dev-server:開発用のwebサーバー

srcフォルダとJSファイル2つ作成

フォルダ作成:js-basic > src

ファイル1作成:js-basic > src > index.js

ファイル2作成:js-basic > src > world.js


ソースコードは下記からコピってください↓

webpack.config.jsを作成する

package.jsonのscriptsで囲まれた部分を修正する

mode development:コードの圧縮行わない、–mode production:コードの圧縮行う

JSの環境設定は完了です

とりあえず、お疲れ様です(^^)

コンパイルを実行します

下記にバンドルされたbuild.jsが作成されていたら、とりあえずは成功です。

フォルダ作成:js-basic > dist

ファイル1作成:js-basic > dist > build.js

つづいてhtmlファイルを作成します

最低限のコードで作成!

ファイル作成:js-basic > dist > index.html

ここではローカルサーバーを立ち上げる

JSの修正が即ページに反映されます。

JSのみの設定はここで完了です

お疲れ様でした。(^^)

SCSS(CSS)環境を作成

ここからが、知りたいところですよね。
進めますね。

srcフォルダ配下にSCSSファイルを作成

フォルダ作成:js-basic > scss

ファイル作成:js-basic > scss > index.scss


↓分かりやすいようにbodyの色を変数を使って赤にするだけのコードです。

Babel関連パッケージのインストール(ES5への変換が必要ない場合はここは不要)

IEが廃止となったためここは不要


SCSSローダーをインストール


CSSを別ファイルとして書き出すプラグインをインストール



「dependencies」セッションに「”mini-css-extract-plugin”: “^X.X.X”,」が追加されます
※Nodeバージョンによって、「X」の値は変更されます

webpack.config.jsをSCSSに対応(下記ですべてを上書き)


「dist/js/bundle.js」、「dist/css/style.css」としたい場合は下記2か所を修正

index.jsをSCSSに対応(下記ですべてを上書き)


index.htmlをCSSに対応(下記ですべてを上書き)



JS+SCSSの環境設定は完了です

お疲れ様でした(^^)

コンパイルを実行します


ローカルサーバーを立ち上げる

JS、SCSSの修正が即ページに反映されます。

これで完了です

お疲れ様でした。(^^)

補足

ファイルを共有する場合、「node_modules」は共有せず、個人で「npm i」コマンドでインストールする↓

最後に

今回は、webpackでjsとSCSS(CSS)を別ファイルにそれぞれ出力する方法を記載しました。
webpackは、なかなか設定が複雑で、技術もすぐに新しくなるので、検索して、出てきた記事でそのまま設定しても動作しいないということも、まれにあります。
まずは、一つずつ確実に設定をしていきましょう。

今回のファイル一式をGitHubにアップしておきましたので、初期ファイルとしてご活用ください。
https://github.com/hideT-web/webpack_study.git

最後まで、ご覧いただきありがとうございました。
それでは、またね(^^)/