webpack 3入門:スタイルシート(CSSやSass)を取り込む方法

  • 35
    Like
  • 0
    Comment

webpackにはJavaScriptのバンドルだけではなく、スタイルシート(CSSやSass)のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack 3入門 - JS開発で人気のバンドルツール」では、webpackの基本的な使い方を解説しましたが、この記事ではスピンオフとしてスタイルシートに焦点をあてて紹介します。

※この記事はwebpack 2+をもとに解説しています。webpack 1.x系とは互換性がありませんのでご注意ください。

※webpackを利用するのは事前にNode.jsをインストールしておいてください。この記事では2017年8月現在最新のNode.js v8.0、npm 5.3で解説します。

※サンプルはGitHubで公開しています(webpackのサンプル)。ダウンロードして読み進めてください。

いろんなリソースを取り込めるwebpack

webpackでは、JavaScriptだけではなくスタイルシート、画像、ウェブフォント、音声、動画等あらゆるリソースをモジュールとして取り扱えます。JavaScriptファイル以外のファイルを扱うには、webpackのLoader機能を用います。
公式ドキュメントの「Loaders」を見るとわかりますが、多くのファイルの読み込みに対応しています。

webpack+CSSの構成を作成しよう

CSSファイルの読み込み例を紹介します。

モジュールのインストール

CSSの読み込みに必要なローダーは、Style LoaderCSS Loaderなので、この2つのプラグインをプロジェクトフォルダーにインストールします。コマンドラインで次のコマンドを入力ください。

npm i -D webpack style-loader css-loader

設定ファイル

続いて、webpack.config.jsファイルに次の設定を追記します。

webpack.config.js
module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./main.js`,
  // ファイルの出力設定
  output : {
    //  出力ファイルのディレクトリ名
    path     : `${__dirname}/`,
    // 出力ファイル名
    filename : 'bundle.js'
  },
  module : {
    // Loaderの設定
    rules : [
      // CSSファイルの読み込み
      {
        // 対象となるファイルの拡張子
        test: /\.css/,
        loaders: [
          'style-loader', 
          {
            loader: 'css-loader',
            // オプションでCSS内のurl()メソッドの取り込みを禁止する
            options: {url: false}
          }
        ]
      },
    ]
  }
};

コンテンツ側のソースコード

これでプロジェクトフォルダー内でローダーを使う設定が完了しました。ローダーを用いてCSSを読み込むには、エントリーポイントのJavaScript内でimport文を用いて次のように記述します。

main.js
// import 文を使ってstyle.cssファイルを読み込む。
import './style.css';
style.css
body {
  background-color: #e87070;
}

ビルド

webpackコマンドを使ってビルドすると、ビルドされたbundle.jsの中にCSSコードが埋め込まれます(CSSコードが埋め込まれている部分)。

npx webpack

160519_webpack_css_bundle.png

HTML側でbundle.jsファイルを読み込むと、スタイルが適用されるのが分かります。

中間言語の変換 - webpack+Sassの構成を作成しよう

フロントエンド開発では、SassTypeScriptBabel等の中間言語を使うことが多いでしょう。webpackではこれらの中間言語を変換できます

例として、スタイルをSassで記述します。

モジュールのインストール

Sassの読み込みに必要なローダーは、sass-loaderです。また、Sass LoaderはSassのコンパイル用モジュールnode-sassに依存しているので、あわせてインストールします。コマンドラインで次のコマンドを入力します。

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

設定ファイル

続いて、webpack.config.jsファイルに次の設定を追記します。

webpack.config.js

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./main.js`,
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    // Loaderの設定
    rules: [
      // Sassファイルの読み込みとコンパイル
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        loaders: [
          'style-loader',
          {
            loader: 'css-loader',
            // オプションでCSS内のurl()メソッドの取り込みを禁止する
            options: {url: false}
          },
          'sass-loader'
        ]  
      }
    ]
  }
};

これでプロジェクトフォルダー内でローダーを使う設定が完了しました。

コンテンツ側のソースコード

ローダーを用いてSassを読み込むには、エントリーポイント内でimport文を用いて次のように記述します。

main.js
// import文を使ってSassファイルを読み込む。
import './sassStyle.scss';
sassStyle.scss
html {
  body {
    background-color: #ffc259;
  }
}

ビルド

webpackコマンドを使ってビルドすると、webpackはSassをコンパイルします。

npx webpack

ビルドされたJavaScriptファイルbundle.jsの中に、コンパイルされたCSSコードが埋め込まれます。

Sassで画像を取り込んでSassをコンパイルする場合

webpackでは画像もJSファイルにバンドルできます。画像はBase64文字列として変換され、コンパイル後のJSファイルに含まれます。何でもかんでもJSファイルにするのは違和感があるかもしれませんが、HTTP/1.1環境下でリクエスト数を極限まで下げるには一つの最適解だと思います。

サンプルは「GitHubのフォルダー」にありますので、参照してください。

モジュールのインストール

基本的にはSassの手順と同じですが、url-loaderもモジュールをインストールしておきます。

npm i -D webpack sass-loader node-sass style-loader css-loader url-loader

設定ファイル

その上で、webpackの設定ファイルには次のように指定します。JPGやPNGなどの画像形式の場合にurl-loaderが適用されるように指定しています。

webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: { // ファイルの出力設定
    path: `${__dirname}/build`,  //  出力ファイルのディレクトリ名
    filename: 'bundle.js'  // 出力ファイル名
  },
  module: {
    rules: [

      {
        // 対象となるファイルの拡張子
        test: /\.scss/,
        // Sassファイルの読み込みとコンパイル
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        // 対象となるファイルの拡張子
        test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/,
        // 画像をBase64として取り込む
        loader: 'url-loader'
      }
    ]
  }
};

ビルド

webpackコマンドを使ってビルドすると、webpackはSassをコンパイルします。

npx webpack

ビルド後の成果物はこのようになります。比較してみてください。

まとめ

webpackは設定次第で幅広くカスタマイズできます。次の記事ではBabelやTypeScriptなどを使って、ECMAScript 2017相当の構成の組み方を解説しています。フロントエンド界隈ではES2015以上を使ってJavaScriptを開発することがほとんどだと思うので、参考にしてくださいませ。

※これらの記事ではReactやVue.js、Three.js、jQueryなど様々なサンプルを用意しています。

また、タスクランナーのGulpとwebpackを組み合わせるのもオススメです。