webpackでJavaScriptモジュールを扱う

webbpackを使うと、JavaScriptモジュールをブラウザで扱える形に変換できます。webpackの設定はwebpack.config.jsというファイルを作成して記述します。

▼webpack.config.js

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './main.js',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/`,
    // 出力ファイル名
    filename: 'bundle.js'
  }
};

main.jsのようにメインとなる処理を行うJavaScriptファイル「エントリーポイント」と呼びます。エントリーポイントをコマンドでビルドします。webpackでは出力ファイルの指定を絶対パスで指定する必要があるため、__dirnameパラメーターでプロジェクトフォルダーを指定しています。

それでは、コマンドラインで次のビルドコマンドを入力してみましょう。

▼webpackによるビルド(コマンドライン)

npm run build

main.js内で必要なsub.jsが統合され、bundle.jsとして出力されます。bundle.jsには、import挙動の処理を現行のブラウザでも可能にするコードと、各モジュールの処理が含まれます。

160519_webpack_js_bundle

bundle.jsをHTMLで読みこむと、sub.js内の処理が実行されます。

<script src="bundle.js"></script>

▲ HTMLファイルでの読み込み

webpackではCSSや画像等のあらゆるファイルをモジュールとして取り扱える

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

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

CSSファイルの読み込み例を紹介します。CSSの読み込みに必要なローダーは、Style LoaderCSS Loaderなので、この2つのプラグインをプロジェクトフォルダーにインストールします。

npm install -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', 'css-loader']
      },
    ]
  }
};

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

▼ main.js

// import 文を使ってstyle.cssファイルを読み込む。
import './style.css';

▼ style.css

body {
  background-color: #e87070;
}

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

160519_webpack_css_bundle

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

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

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

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

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

npm install -D webpack sass-loader node-sass

続いて、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', 'css-loader', 'sass-loader']
      }
    ]
  }
};

これでプロジェクトフォルダー内でローダーを使う設定が完了しました。ローダーを用いてSassを読み込むには、エントリーポイント内でrequire()メソッドを用いて下記のように記述します。

▼ main.js

// import文を使ってSassファイルを読み込む。
import './sassStyle.scss';

▼ sassStyle.scss

html {
  body {
    background-color: #ffc259;
  }
}

webpackコマンドを使ってビルドすると、webpackはSassをコンパイルします。ビルドされたJavaScriptファイルbundle.jsの中に、コンパイルされたCSSコードが埋め込まれます。

次のページでは、webpackでTypeScriptを使う方法を解説します。