webpackで共有ライブラリを使う&作るビルド設定

webpackをシンプルに導入すると、SPAのようにモノリシックなファイルにバンドルされますが、設定しだいでモジュール化も可能です。（モノリスなライブラリ作成ノウハウについては、 ES2015で静的なライブラリ塊をバンドルするで解説しています）

共有ライブラリのコンシューマー設定

たとえば、ReactJSを利用するプロジェクトでは、ライブラリのコンシューマー（アプリ本体）の冒頭で、以下のようにライブラリをインポートします。

import React from "react";
import ReactDOM from "react-dom";

class SomeComponent extends React.Component {
(以下コード本体)

webpackを特に意識せずにセットアップしてビルドすると生成されるJavascriptは、このアプリに加えてreact, react-domをバンドルしたものになります。

この構成はSPAのようにこのファイルだけで動作するアプリであれば効率的ですが、複数ページ構成のアプリの場合には、毎回ライブラリを含めて再読み込みすることになります。

この例でreact, react-domをバンドルから除外するには、webpack.config.jsの設定に externalsの定義を追加します。

var webpack = require('webpack');
module.exports = {
  entry: {
    app: './src/app.jsx',
  },
  output: {
    path: __dirname + "/build-dev",
    filename: "[name].js"
  },
  resolve: {
    extensions: ['', '.js', 'jsx']
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
    externals: {
               'react': 'React',
               'react-dom': 'ReactDOM',
           }
};

この指定でビルドした場合、react, react-domはCDNやWebサーバからスタティック配信したライブラリを利用することになります。
以下のようにHTMLから別途インクルードします（アプリのjsファイルをインクルードする前に読み込む）。

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

<script src="build-dev/app.js"></script>

共通ライブラリを作成する

上記のようにCDNからビルド済みのライブラリをインクルードできる場合、本質的には自前でビルドする必要はないのですが、ビルドが必要なパーツを組み込んで１つの共通ライブラリを作ることも可能です。

アプリとは別プロジェクトで、ライブラリだけをバンドルするプロジェクトを作ります。

モジュールのエクスポート形式にはCommonJSやAMD, UMDなどいくつかの形式がありますが、