【webpack】 useの書き方の種類

webpackのrulesでローダーを利用する場合はuse内に書きますが、このuseには書き方に種類があります。

省略しない書き方

フルで書くとこうなります。

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    {
                        loader: "style-loader",
                        options: {
                            // ...
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            // ...
                        }
                    }
                ],
            },
        ],
    },
}

useには、各ローダーと対応するオプションを書き連ねます。しかし、オプションがない場合や、ローダーが1つだけの場合などは省略した書き方が可能です。

省略した書き方

useするローダーが1つのとき

この場合、useを省略できます。

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.vue/,

                // loaderが1つなので、useで囲まなくて良い
                loader: "vue-loader",
                options: {
                    // ...
                }
            },
        ],
    },
}

useではなく、test、loader、optionsが同じ階層に並んでいますね。ruleに対応するloaderが1つの場合、useで囲む必要がありません。

optionsも、空の場合は用意する必要がありません。

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.vue/,
                loader: "vue-loader",
            },
        ],
    },
}

loaderは複数でoptionがない場合

use内にloader名を配列で並べます。

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.scss/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ]
            },
        ],
    },
}

optionsの有無が混在する場合

optionsがあるものだけ普通に書きます。

// 略...

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    "sass-loader",
                ]
            },
        ],
    },
}

style-loaderとsass-loaderは省略した書き方、css-loaderだけoptionsを記述しています。

まとめ

useには複数の書き方があり、しばしば省略した書き方が見られます。

バージョンが違うわけではなく、単に省略されているだけだったりするので、知っておくと便利です。