【webpack】 loaderを使って様々なファイルをビルドする (基本編)

Webpackは、Javascriptだけでなく、scssやsassなどをモジュールとしてバンドルするなど、様々なビルドが可能です。ここではよく利用するものを紹介します。

loader

それぞれをビルドするには、loaderが必要になることが多いです。各loaderはnpm経由で導入します。

CSS

cssのビルドを紹介します。ビルドをするファイルを作成しましょう。

/* app.css */

#app p {
    font-size: 24px;
    color: #ff0000;
}

project/
├ dist/
│ ├ js/
│ └ index.html
├ src/
│ ├ css/
│ │ └ app.css   <-- ここ
│ └ index.js
├ webpack.config.js
├ package-lock.json
└ package.json

このままでは配置しただけでビルド対象になりません。スクリプトの依存関係に置くことでビルドされます。

import "./css/app.css";

Javascriptからimport文で読み込むことで依存関係に含むことができます。これで./css/app.cssがビルド対象に含まれるようになります。

早速ビルドといきたいのですが、このままではできないのでloaderを導入します。

npm i css-loader style-loader

次に、それらのローダーを使うために設定を記述します。

const src = "/src/";
const dist = "/dist/assets";

module.exports = {
    entry: {
        main: src + "index.js",
    },
    output: {
        filename: "[name].bundle.js",
        path: __dirname + dist,
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    "style-loader",
                    "css-loader",
                ],
            },
        ],
    },
}

rulesの中に沢山増えましたね。細かい紹介は別の章で行いますが、ここでは、testにはそのルールを適用するファイルのパターンを、useには利用するローダーを指定します。

useの書き方についてはこちら

【webpack】 useの書き方の種類

webpackのrulesでローダーを利用する場合はuse内に書きますが、このuseには書き方に種類があります。 省略しない書き方 フルで書くと…

これで準備が完了しました. 早速npm run devしてエラーなく終わればOKです。実際にブラウザでページを開いてみましょう!

ここで、HTMLからCSSを読む必要はありません。Javascriptで処理してくれるので、jsだけ読み込めばokです。

SCSS

cssでは量が増えてくると階層構造の管理が面倒になるので、scssやsassなどを利用することが多いですね。ここでは、私の好みでscssをビルドしてみます。

/* app.scss */

#app {
    p {
        font-size: 24px;
        color: #0000ff;
    }
}

jsで読み込むファイルもscssを指定します。

import "./css/app.scss";

この例でのファイル構造はこのようになっています。

project/
├ dist/
│ ├ js/
│ └ index.html
├ src/
│ ├ css/
│ │ └ app.scss
│ └ index.js
├ webpack.config.js
├ package-lock.json
└ package.json

次に、ビルドするためのloaderを追加します。

npm i css-loader style-loader sass sass-loader

そして、loaderを利用するためのruleを記述します。

const src = "/src/";
const dist = "/dist/assets";

module.exports = {
    entry: {
        main: src + "index.js",
    },
    output: {
        filename: "[name].bundle.js",
        path: __dirname + dist,
    },
    module: {
        rules: [
            {
                test: /\.scss/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
}

testには.scssを、useにはscssをcssにするためのscss-loaderをcss-loaderの下に配置します。

ビルドして反映されていればOKです。

まとめ

loaderで設定するuseでは、下から順に処理されるという事が重要です。順番を間違えるとエラーとなるので注意しましょう。