yarnのドキュメントを読んだので、今度はwebpackの勉強がてらwebpackのチュートリアルしてみる。
yarnはnpmの代わりに使うだけなのですが、、

webpackとは

webpackとは、モダンJavaScriptアプリケーションのモジュールバンドラー。
アプリケーションが必要とするモジュール（依存関係も含む）をまとめてくれる。

webpackを使うメリット

該当スクリプトでの依存関係が明らかになる
依存関係の解決がされているので、読み込み順を間違える心配がない
必要な依存関係だけをインポートしているので、不要なモジュールをインポートしないで済む

これまでの問題点

JavaScriptのスクリプトが外部ライブラリに依存しているかわからない
依存関係を見落としたり、間違えた順序で読み込むとアプリケーションは正しく動作しない
使わない依存関係を含めてしまうと、ブラウザで不要なコードをダウンロードしてしまう

チュートリアルする

webpack Guidesをやってみる。

準備

好きなディレクトリ作って移動して、その中でyarn initする。
そしたらwebpackの依存を追加する。

yarn init
yarn add webpack --dev

HTMLとJavaScriptファイルを追加する

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

コードを書く

準備で作成したindex.htmlとsrc/index.jsにコードを追加する。

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>

src/index.js

import _ from 'lodash';

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

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

lodashについてはこの後言

依存関係の追加

lodashという依存をインストールする。
lodashはindex.jsと依存関係にあるので、ローカルにインストールする必要がある。

yarn add lodssh --dev

package.jsonにも追加されている。

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "kyohei",
  "license": "MIT",
  "dependencies": {
    "webpack": "^3.0.0"
  },
  "devDependencies": {
    "lodash": "^4.17.4"
  }
}

モジュールの読み込みとHTMLファイルの編集

webpackを使ってスクリプトをbundleするので、src/index.jsを編集しlodashをインポートする。

src/index.js

import _ from 'lodash';

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

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.htmlのscriptタグでは、バンドルしたファイルを読み込むようにする。
lodashを読み込むようにしていたscriptタグは消す。

dist/index.html

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

bundleの実行

src/index.jsをエントリポイント、dist/bundle.jsをアウトプットとしてwebpackを実行する。

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

index.htmlを開いてHello webpackと表示されていればうまくいっている。

ES6モジュール

webpackはimportとexport以外のコードを変更しないので注意。
他のES6の機能を使用している場合は、babelなどのトランスパイラを使用する。

webpackの設定

ほとんどのプロジェクトでは、チュートリアルよりも複雑な設定ファイルが必要になる。そのため、webpackは設定ファイルをサポートしている。
ターミナルでコマンドを実行するよりも効率的。
webpack.config.jsファイルをプロジェクトのルート直下に作成する。

作成したwebpack.config.jsを以下のように編集する。

webpack.config.js

var path = require('path');

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

ターミナルで以下のように実行すれば設定ファイル通りに実行される。

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

./node_modules/.bin/webpackってパスを通せば短くできるのかな、、、
調べてみたい。
→ package.jsonのscriptsを使えばパスを通さなくても良かった。
詳しくは後述。

webpack.config.jsが存在する場合は、デフォルトで見に行くので、webpack.config.jsを設定ファイルとして使用する場合は、以下でも大丈夫。

./node_modules/.bin/webpack

設定ファイルでローダーやプラグインの定義ができる。
詳しくはConfiguration documentationにあるので必要になったら読みたい。

yarn scripts

ターミナルからwebpackのパス全体を入力してローカルコピーを実行するのは手間。
package.jsonにショートカットを設定できる。
scriptsの中では、パス全体を書き出す代わりに、ローカルにインストールされたパッケージを参照できている。