[意訳]あなたのワークフローをWebpack化しよう #フロントエンド

このポストは以下の記事を意訳したものです。
Webpack Your Workflow
もし誤りなどありましたら、ご指摘いただけると幸いです。

（以下、訳）

序文

Gruntのconfigファイルが指数関数的に肥大化し、私たちを怯え上がらせた後、Gulpとその親友であるBrowserifyが街にやった来ました。彼らはキラキラしていて、わかりやすくパワフルでした。そして、シンプルゆえに 長〜いパッケージの一覧を必要とし、イライラしながら紐付ける必要がありました。

プロジェクトを始めるための手っ取り早いセッティングは、苦痛となってしまいました。

そんなある日、私は新しくてよりパワフルなツールを発見しました。Gulpと同様のビルドプロセスが可能で、かつより良いツールです。

アプリケーションを最適化する前に、ワークフローを最適化するべきです。そうすれば、もっと多くの時間をアプリケーションに充てることができます。
- Dan Abramov(Reduxの作者)

Webpack

新しいツールの名前は、Webpackと言います。Webpackは私の理想にぴったりでした。Webpackはビルドにおける問題を解決し、GruntやGulp, Browserifyが必要なくなるほどの大きなパワーを持っていました。

Webpackでは、シンプルなconfigファイルでビルドプロセスを定義できます。たしかにGruntのconfigファイルは厄介でしたが、タスクをしっかりとこなしてくれるのならば、config自体は悪いものではありません。

つまり...

ファイルが変更される度に、自動コンパイルと自動更新されるような、ES6で書かれたReactのSPAがあるとします。Webpackはこれをどれほど単純に実行できるのでしょう？

なんと、たった25行のconfigファイルで済みます。こちらが私の最新のプロジェクトから持ってきたgistのコードです。

webpack.config.js

module.exports = {
  entry: "./app/app.js",
  output: {
    path: './public',
    filename: "bundle.js",
    publicPath: '/'
  },
  // webpack-dev-server config for refreshing and more
  devServer: {
    inline: true,
    contentBase: './public',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

ps. Webpack1系はES6のモジュールをネイティブではサポートしていません。Webpack2系では、サポート予定です。最高じゃないですか？ :)

Webpackは、あなたがソースディレクトリからデスティネーションディレクトリへとファイルを移動するだろうと予測します。なおかつ、JavaScriptで作業をすることが求められます。

あなたは、画像ファイルやCSSファイルの処理についても気にするかもしれません。

結論から言うと、これらのファイルをコンポーネントへと直接インポートすることができます。

import-example.js

//import your CSS (or less, etc) for the component
import style from './style.css'


//import your images for the component
import img   from './img.png'

Webpackは賢いので、動的にCSSと画像を制御します。もしCSSファイルが大きくなければ、スタイルシートを読み込みますし、もし大きければ圧縮します。Webpackはファイルのサイズを気にしてくれるのです。

このCSSへの対応は、画像への対応を含めて、url-loaderというプラグインを用いることで実現します。もし充分に画像が小さいならば、base64にエンコードしてくれます。

これはまだ、Webpackのほんの一面に過ぎません。

コード分割最高！

Webpackはソースをバンドルに分割しますし、あるいはあなたが複数のエントリーポイントを設定することもできます。なので、必要なページのみをダウンロードすることができます。

もしSPAが巨大ならば、この機能は本当に役に立ちます。ユーザは巨大で単一なJavaScriptファイルを落とす代わりに、必要なファイルのみを落とすことができるのです。

Webpackについてもっと学びたいですか？では、ドキュメントを見る代わりにPete HuntのWebpack-howtoを見ることをオススメします。

そして、覚えておいてください。

がんばるのではなく、賢くやりましょう

読んでくださりありがとうございました。