Webpackで外部ライブラリを読み込む方法

参照：https://webpack.github.io/docs/code-splitting.html

最近Webpackに興味を持ちはじめて、勉強しているのですが、外部ライブラリをうまく読み込む方法がわかったのでメモします。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        // 外部ライブラリを読み込むvendorとページごとのjs作成
        'vendor': ['bootstrap-loader', 'backbone-fetch-cache'],
        'app/index': path.join(__dirname, '/src/app/index.js')
    },
    output: {
        filename: path.join(__dirname, '/build/[name].js')
    },

    /* 他の設定（ここでは省略） */

    plugins: [
        // この設定をするとvendorの中身は他のentryでは読み込まれない
        new webpack.optimize.CommonsChunkPlugin('vendor', 'build/vendor.js'),
        // webpack.ProvidePluginを使用すると、指定した変数名でライブラリを使用できるようになる
        // 以下の例だと、$, jQuery, window.jQueryでjqueryを使用することができる
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new webpack.ProvidePlugin({
            kb: 'knockback'
        }),
        new webpack.ProvidePlugin({
            moment: 'moment'
        })
    ],
    resolve: {
        extensions: ['', '.js']
    }
};

js読み込みはこんな感じ。これでライブラリ読み込み用のjsとアプリケーション用のjsとで分けることができる。

index.html

<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="app/index.js"></script>