Suzuki Blog Written by Yuki Suzuki

JavaScriptとSASSを別ファイルでコンパイルする手順【webpack環境構築】

JavaScript

今回はwebpackを利用してJavaScriptとSASSをコンパイルする環境構築の手順をお伝えします。

LP制作などでSASSを利用したい方は多いと思います。

SASSは変数の設定ができるなど、とても便利ですがそのままでは利用できません。

CSSファイルにコンパイル(変換)する必要があります。

webpackを利用すればSASSはもちろん、JavaScriptも同時にコンパイルし、別ファイルで出力できます。

webpack公式サイト

手順

  • 作業フォルダの作成
  • webpackをインストール
  • Babel関連のモジュールを追加
  • 別ファイルで出力するためのモジュールを追加
  • SASSの準備
  • JavaScriptの準備
  • package.jsonの編集
  • webpack.config.jsの編集

スポンサードサーチ

作業フォルダの作成

まずは作業フォルダを作成します。

今回は「testapp」という名前のフォルダで作業していきます。

ターミナルで以下のコマンドを実行してください。

mkdir testapp

webpackをインストール

次にwebpackをインストールします。

プロジェクトごとにインストールするのが一般的です。

今回は「testapp」にwebpackをインストールします。

以下3つのコマンドを実行してください。

cd testapp
npm init -y
npm i -D webpack webpack-cli

スポンサードサーチ

Babel関連のモジュールを追加

続いて以下のコマンドでBabel関連のモジュールを追加します。

npm i -D @babel/core @babel/preset-env babel-loader

Babel公式サイト

別ファイルで出力するためのモジュールを追加

以下のコマンドで別ファイルで出力するためのモジュールを追加します。

npm i mini-css-extract-plugin

スポンサードサーチ

SASSの準備

以下のコマンドでSASS関連のモジュールを追加します。

npm i -D sass-loader node-sass css-loader

モジュールの追加は以上です。

ここまででpackage.jsonは以下のようになっていると思います

エディタで「testapp」を開き、確認してみてください。

{
  "name": "testapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.13",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "mini-css-extract-plugin": "^1.4.0"
  }
}

次にコンパイルするファイルの編集をします。

「src」フォルダを作成してください。

その中に「scss」フォルダを作成し、「main.scss」を作成、編集します。

$my-color: red;

body {
    background-color: $my-color;
}

JavaScriptの準備

同じように「src」に「js」フォルダを作成し、その中に「main.js」と「test.js」を作成、編集します。

main.js

import '../scss/main.scss';
import test from './test';

test();

test.js

export default function test() {
    alert('test!!!');
}

スポンサードサーチ

package.jsonの編集

package.jsonのscriptsを以下のように編集します。

{
  "name": "testapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.13",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "mini-css-extract-plugin": "^1.4.0"
  }
}

この編集により、

npm run build

のコマンドでJavaScriptとSASSファイルのコンパイルができます。また、

npm run watch

でファイルの編集を常時監視することもできます。

webpack.config.jsの編集

最後にwebpack.config.jsの編集をします。

「src」フォルダなどと同じ階層に「webpack.config.js」を作成し、以下のように編集してください。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    // コンパイル元のファイルを設定
    entry: './src/js/main.js',
    // JavaScriptのコンパイル先とファイル名を設定
    // この場合はdistフォルダにbundle.jsという名前でコンパイルする
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env'
                            ]
                        }
                    }
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // SASSのコンパイル後のファイル名を設定
            // コンパイル先はoutputに設定したフォルダ
            // この場合はdistフォルダにstyle.cssという名前でコンパイルする
            filename: 'style.css',
        })
    ]
};

これで準備完了です。

npm run build

を実行することで、JavaScriptとSASSを同時にコンパイルし、別ファイルで出力できます。

まとめ

いかがだったでしょうか。

プログラミング初心者にとって環境構築はとっつきにくいイメージがあると思います。

ですが、実務では避けて通ることはできません。

ぜひwebpackを使ってチャレンジしてみてください。

自分も引き続き勉強していきます。

参考サイト

プログラミングを動画で学ぶなら

Udemy

プログラミングをオンラインスクールで学ぶなら

デイトラ

Skill Hacks