webpackでjQueryを別ファイルに分けたい

なんで？

1ページですむSingle Page Application ではなく今までやってきたような複数ページにまたがる場合、共通部分を別ファイルに分けておくことでDLサイズを減らします。

例えばjQueryのCDNはこれをサイト間で使いまわすことで、重複をなるべく減らしましょう。ということなんですが、複数のCDNがあってその中に各バージョンがあるので本当にしょっちゅうブラウザキャッシュにヒットするのでしょうか？
サイト内の話であればほぼほぼキャッシュ使うと思いますが。

jQueryCDNを使いたい

jQueryについてトラフィックを別サーバーへ逃すために使いたい場合有効です。
webpackへは「jQueryは出力せず自分で読み込ませる」という設定にして自分でCDNのタグを追加します。そのためjQueryはnpmのバージョン管理から外れます。

設定

webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';

export default {
    entry: {
      app: './js/main.js'
    },
    output: {
        path: path.join(__dirname, 'www/js'),
        filename: 'bundle.js',
    },
    externals: {
        jquery: 'jQuery'
    },

    target: 'web'
}

HTMLには以下のタグを挿入

<script src="//code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>
<script src="js/bundle.js" charset="utf-8"></script>

バージョン管理したjQueryをサイト内で共用する

jquery関連をjqueryというnameでグルーピング。
それをwebpack.optimize.CommonsChunkPluginで設定します。
この方法だとnpmでinstallされたjQueryが出力されるためバージョン管理内です。
minifyされる方はpluginsに追加してください。

設定

webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';

export default {
    entry: {
      jquery: ['jquery'],
      app: './js/main.js'
    },
    output: {
        path: path.join(__dirname, 'www/js'),
        filename: 'bundle.js',
    },

    target: 'web',
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "jquery",
            filename: "jquery.js",
            minChunks: Infinity
        }),
    ],
}

HTMLには以下のタグを挿入

<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/bundle.js" charset="utf-8"></script>