webpack(Ver3)の公式チュートリアルをやって基本を理解する

普段はJavaを中心にバックエンドをメインの仕事にしていますが、ここ2ヶ月間ほどReact.jsを中心にモダンなフロントエンドの開発環境の勉強をしてきました。

webpackの文献はネット上でもまだ多くはなく、また古いバージョン(1系)での記述も多くサンプルプログラムが動かなかったということもあったので、新しいバージョン(2017年7月時点で最新。Ver3.3)で勉強したことを備忘録としてこのブログに残そうと思います。

[スポンサーリンク]

今回やること

webpackの公式チュートリアルに沿ってサンプルプロジェクトを作成していきます。

そこで学んだこと(webpackの基本的な動作)を備忘録として残していきます。

今回実施したwebpackの公式チュートリアル(ver3.3.0)はこちらです。

このブログの読み方

上記の公式チュートリアルに沿ってサンプルプロジェクトを作成していきますので、上記公式チュートリアルを開いて、一緒に見ながらこのブログを見てもらえると理解が早いと思います。

npmをインストール

まず、webpackを動かす前にnpmをインストールする必要があります。

以前コチラの記事でインストール手順を書いたので、まだnpmをインストールしていない方はこちらを参考にして下さい。

しかし、こちらの記事はMacの方向けのみです。Windowsを使っている方はGoogleで検索してみてください。

webpackをインストールする

ではまず、公式チュートリアルのBasic Setupを見てください。

webpackをインストールしていきます。しかし、webpackコマンドが有効なのはnpm installコマンドを実行したフォルダのみです。

全てのフォルダにおいてwebpackを有効にするにはグローバルオプションをつける必要があります。(ここでは解説しません。とりあえず先に進んでいきましょう。)

まずは、ディレクトリを作成します。
webpack-demoがサンプルプロジェクトのルートフォルダになります。

mkdir webpack-demo && cd webpack-demo

つづいて、npm設定ファイルのpackage.jsonファイルを作成するためのコマンドです。
package.jsonはwebpackの設定ファイルではなく、npmの設定ファイルです。間違えないように気をつけましょう。

ちなみに、オプションの-yは、npm initを実行すると通常だと対話形式でpackage.jsonを作成していきますが、それを全てyes(デフォルト)にして対話形式を省略するといったものです。

npm init -y

そしてさいごに、webpackをインストールしていきます。
--save-devオプションについてはここでは特に解説しません。今はとりあえず無視して先にすすみましょう。これでwebpackのインストールは完了しました。

npm install --save-dev webpack

インストールが完了すると、node_modulesフォルダの下にライブラリがインストールされます。(ここを開発者が直接さわったりすることはありません。ただのライブラリ群です。)

HTMLとJavaScript

では続いて、HTMLとJavaScriptを作っていきましょう。

ここで作成したファイルはまたあとで編集していきます。

src/index.js

先程npmコマンドを実行したフォルダへsrcフォルダを作成して、そのフォルダ配下にindex.jsファイルを作成していきます。

function component() {
  var element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

5行目に見慣れないロジックがありますよね。

これはとあるライブラリの構文です。とりあえずここでは不明な構文でも支障なしです。のちほど解説していきますので先へ進みましょう。

index.html

先程npmコマンドを実行したフォルダの直下へindex.htmlファイルを作成していきます。

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

4行目でスクリプトを読み込んでいますね。これが先程の見慣れないロジックの正体です。先程のロジックはlodashライブラリの機能を使ったロジックでした。

フォルダ構成はこのような形になります。

  webpack-demo
  |- package.json
  |- index.html
  |- /src
    |- index.js

上記の書き方の問題点

上記のindex.htmlを開くと「HELLO webpack」の文字が表示されて正常に動作すると思います。

しかし、公式チュートリアルによると、上記の書き方には問題点があるようです。

It is not immediately apparent that the script depends on an external library.
If a dependency is missing, or included in the wrong order, the application will not function properly.
If a dependency is included but not used, the browser will be forced to download unnecessary code.

  • jsファイルが外部ライブラリに依存しているのかが分かりにくい
  • もし間違った順序で外部ライブラリが定義されていると動かない
  • 外部ライブラリを使用していなくてもダウンロードされてしまう

これらの問題点を解決するために、これより以降でwebpackを使って上記のロジックを書き直していきます。

ライブラリを取得する

それではさっそく上記のHTMLとJavaScriptをリファクタしていきましょう。

まずは、scriptタグの部分をリファクタしていきます。

リファクタの概要としては、webpackでライブラリを取得して、それをJavaScript内で使用できるようにしていきます。

今回取得するライブラリは、HTML内で以下のように指定のあるlodashです。

    <script src="https://unpkg.com/lodash@4.16.6"></script>

lodashライブラリの概要についてはコチラをご覧ください。

さて話を戻して、ライブラリの取得を行っていきましょう。

ではまず、公式チュートリアルのCreating a Bundleを見てください。

こちらのコマンドで、lodashがインストールしましょう。
--saveオプションについてもここでは解説しません。先に進みましょう。

npm install --save lodash

それでは、次に取得したライブラリをHTMLとJavaScriptで使用できるようにするために、先程のソースを修正していきます。

src/index.js

JavaScriptの先頭へimportを入れて、外部ライブラリを読み込めるようにします。

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

まず、index.htmlのファイルの場所を/distへ変更しましょう。
その後、scriptタグの部分を削除します。

<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
  <script src="bundle.js"></script>
 </body>
</html>

フォルダ構成はこのような形になります。

  webpack-demo
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

これでリファクタが完了しました。

でもこれでは、webpack用のロジックとなってしまってこのままでは動かすことができません。

なぜ動かせないかというと、まだこの段階では、bundle.jsがありません。こちらをビルドして生成する必要があります。

なので、次以降でwebpackでビルドして動かせる状態へとしいていきましょう。

webpackでビルドする

公式チュートリアルのCreating a Bundleの一番下の下の方をみてください。

さりげなくビルド方法が記述されています。

このコマンドで、index.jsをビルドして、index.htmlから読み込めるbundle.jsが/distフォルダの下に作成されます。

./node_modules/.bin/webpack src/index.js dist/bundle.js

フォルダ構成はこのようにかわりました。

  webpack-demo
  |- package.json
  |- /dist
    |- index.html
    |- bundle.js
  |- /src
    |- index.js

ES2015 (ES6)対応

公式チュートリアルのES2015 Modulesをみてください。

webpackではES2015 (ES6)に対応していないブラウザのために、ES2015 (ES6)をES5に変換するためのプラグインBabelが用意されています。

すみません。少し小難しい言い方をしましたね。

ざっくりいうと、新しいJavaScriptの書き方を古いやつに変換して、どのブラウザでも動くようにする。ということです。

しかし、今回のチュートリアルではそのBabelを使った箇所は登場してこないので、今回は省略します。

webpackのコンフィグファイル

公式チュートリアルのUsing a Configurationをみてください。

先程はコチラのコマンドを実行してビルドを行いました。

./node_modules/.bin/webpack src/index.js dist/bundle.js

しかし、毎回この引数へビルド対象のファイルと出力対象のファイルを記述するのってめんどくさいですよね。

そこで、ビルド対象や出力対象の情報をコンフィグファイルに定義していきます。

webpack.config.js

こちらがそのコンフィグファイルになります。

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

ファイルの置き場は、package.jsonが置いてあるフォルダと同じ場所にして下さい。

ファイル名は、webpack.config.jsです。

フォルダ構成はこのようにかわりました。

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
    |- bundle.js
  |- /src
    |- index.js

さて、少しだけファイルの中身に触れていきますと、
まず、entry: './src/index.js'となってる箇所がエントリーポイントとなります。(ビルド対象となるJavaScriptたちのルートファイルですね。)

そして、outputの箇所がビルドに成功したら出力されるファイルを定義していきます。

このファイルを作ることで、ビルドのたびに毎回対象ファイルを指定することなく、こちらのようにコマンドを簡潔にすることができます。
これで、毎回ファイル名を指定することなく、bundle.jsがビルドされます。

./node_modules/.bin/webpack --config webpack.config.js

npmを使ってwebpackを実行する

公式チュートリアルのNPM Scriptsをみてください。

今までは、webpackコマンドを直接実行してビルドをしていましたが、npmコマンドでwebpackを実行するように設定することも可能です。

ようは、npmでwebpackビルドを行えるにするということですね。

そのためには、npmの設定ファイルpackage.jsonを以下のように設定していきます。

package.json

ハイライトとなっている箇所が追加した設定です。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "webpack": "^3.3.0"
  },
  "scripts": {
    "build": "webpack"
  }
}

上記ようにpackage.jsonを修正して、こちらのnpmコマンドを実行するとwebpackコマンドが実行されて、bundle.jsがビルドされます。

npm run build

さいごに

npm, webpackをさわってみて感じたことは、フロントエンドのモダンといわれる開発環境もバックエンドの開発環境に非常に似てきたなというのを一番に感じました。

とくにJavaのGradleやMavenに非常に似ていて、ライブラリ管理が簡単に行え、そのうえプラグインも充実している様子だったので、開発していくうえではかなり強力なツールになっていきそうです。

そして率直に感じたのは、フロントエンドの開発環境って本当ここまで発達しているんだと正直驚きましたね。(^^;

当面の目標としては、npmとwebpackを今まで以上に使いこなせるようになりたいものです。

ただし、今回のチュートリアルを実施しただけではwebpackのメリットまでは気付きにくいですよね。(だって1ファイルしかビルドしてないので)

webpackを使う理由や、もっと便利な使い方というのも今後このブログでまとめていきたいと思います。

それでは!