webpackではウェブコンテンツを制作に役立つさまざまなタスクを利用できます。例えば、webpackで出力したJavaScriptファイルは大きなファイル容量となるので、圧縮しておきたいと考える人も多いでしょう。そういった要望に応える機能が備わっています。

webpackでコードの圧縮とソースマップを有効にする

JavaScriptの開発では、元のソースファイルとの関連性を示すソースマップが欠かせません。また、ウェブサイトへの公開時にはウェブページの読み込みを早くするために、ファイル容量を圧縮することも重要でしょう。webpackでは設定ファイルの記述によって、それらを設定することができます。

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。devtoolsource-mapを記述することでソースマップを有効にします。pluginsの部分でwebpack.optimize.UglifyJsPluginを指定することで、JavaSciptのコードを圧縮できます。

▼webpack.config.jsファイル

const webpack = require('webpack');

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

  // ソースマップを有効にする
  devtool: 'source-map',

  plugins: [
    // JSファイルのminifyを実行する
    new webpack.optimize.UglifyJsPlugin({
      // minify時でもソースマップを利用する
      sourceMap: true
    })
  ]
};

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したJSファイルがコンパイルされ、buildフォルダにbundle.jsファイルとbundle.map.jsファイルが出力されます。後者がソースマップと呼ばれるファイルです。

bundle.jsファイルの中身は無駄なコメントが省略され、ファイル容量が最小化されていることが確認できるでしょう。

ここの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

webpackでローカルサーバーを起動し、変更時にブラウザをリロードする

毎回ビルドコマンドをコマンドラインで打ち込むのは効率的ではありません。ファイルの変更を検知し(watchともいいます)、自動的にビルドコマンドを実行し、ブラウザをリロードする・・・といった手順を自動化できます。類似の技術として「lite-server」や「BrowserSync」といったものがありますが、それに近いものだと考えていいでしょう。

「webpack-dev-server」はとても便利な機能です。わずかな設定でできるので構築してみましょう。

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

webpackとwebpack-dev-serverモジュールをインストールしましょう。

npm i -D webpack webpack-dev-server

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドとして"start": "webpack-dev-server"を記述しておくのがポイントです。

▼package.jsonファイル

{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。devServerにルートフォルダーを設定します。ポートの番号は適当な数値を設定ください。

▼webpack.config.jsファイル

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

  // ローカル開発用環境を立ち上げる
  // ブラウザで http://localhost:8081/ でアクセスできるようになる
  devServer: {
    contentBase: 'build',
    port: 8081
  },
};

以上で設定は完了です。npm run startコマンドを入力しましょう。http://localhost:8081/にブラウザでアクセスすると、ファイル保存時にブラウザが自動的にリロードするので、コーディングと確認の作業が楽になるでしょう。

ここの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

次のページではタスクランナーとしての使い分け方を紹介します。