Posted at

Webpackで外部ライブラリをまとめたJSファイルを作る

More than 1 year has passed since last update.

Webpackで外部ライブラリも実装コードもひとまとめにすると、非常にビルド時間が長くなります。それを解決する手段は多々ありますが、Bowerとnpm両方で対応可能な方法について説明します。

※文中のjQueryはnpmにもありますが、敢えてBowerのパッケージしかないと仮定します。


Bowerのモジュール

WebpackとBowerは相性がよくないため(諸説ありますが)、Bowerのモジュールもnode_modules以下にインストールして、Webpackから特別なことをしなくてもロードできるようにします。

まず、.bowerrcをプロジェクトルートに配置します。私は好みで@bower以下に配置されるようにしています。

{

"directory": "node_modules/@bower/"
}

$ bower install jquery

これでjqueryがnode_modules/@bower/jquery以下に配置されます。


npmのモジュール

npmでそのままインストールして、その名前でrequireが可能です。


グローバル上にエクスポートするためのJSファイル作成

以下のファイルをWebpackの設定のエントリに追加します。


export.js

//BowerのjQueryを読み込む場合

window.$ = require("@bower/jquery/dist/jquery");

//npmのangularを読み込む場合
//window.angular = require("angular");


webpack.config.jsは以下の通りになります。


webpack.config.js

module.exports = {

entry: "./export.js",
output: {
path: "../../dist",
filename: "vendor.js"
},
resolve: {
extensions: ["", ".js"]
}
};

これらのファイルをsrc/vendor以下に配置します。


使う側のコード

使う側は特に意識せずにrequireすれば問題ありません。webpack.config.jsのexternalsの設定で、

jqueryが参照された時にグローバルに存在する$を返すようにします。


webpack.config.js

module.exports = {

entry: "./main.js",
output: {
path: "../../dist",
filename: "bundle.js"
},
resolve: {
extensions: ["", ".js"]
},
externals : {
"jquery" : "$"
},
};


main.js

var $ = require("jquery");

console.log($(document));

これらのファイルをsrc/main以下に配置します。


ビルド

src/main及びsrc/vendor以下でwebpackを実行するとdist以下にbundle.jsとvendor.jsが作成されます。

あとは、dist以下にindex.htmlを作成して開いてみましょう。


index.html

<html>

<script src="vendor.js"></script>
<script src="bundle.js"></script>
</html>

vendor.jsを必ず先に読み込む必要があります。


応用

style-loader、css-loader、sass-loader、file-loaderなどを駆使すると、CSSやアセットなどもセットになったパッケージを取り込むことも可能です。

私はjQuery、AngularJS、MaterializeCSS、babel-polyfillを取り込んでみましたが、Uglifyで縮小すると600Kbちょいのサイズになりました。