1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

個人開発Advent Calendar 2017

Day 19

個人開発のJavaScriptビルドをWebpackに乗り換えた話

Last updated at Posted at 2017-12-18

最近はほぼ手付かずになっていますが、GitHub Page上にパズルソルバーを作っています。数ヶ月前に、ビルドをWebpack経由に乗り換えました。

以前の問題点

もともとは、GruntやGulpのように変化し続けるプロセスランナーに嫌気が差して、Browserify+Rakeで組んでいました。Rakeもビルドツールということで、多様なファイルの交錯するJavaScript環境でも問題なく使えたのですが、使っていくに連れて、いくつかの問題に気づきました。

一時ファイルの問題

Rakeが「ファイルをファイルに変換する」というプロセスをベースにしている関係上、最終生成物以外に中間の結果をファイルに置く必要があります。そして、元のファイルを消したときに中間ファイルも消えないと余計なものが残り続けるのですが、ここがどうにもうまくできませんでした。

速度の問題

もともとの思想から言えばそうなるのも必然といえば必然なのですが、1ファイルを処理するために1プロセスを立ち上げる必要があるため、2桁のファイルを処理しようとすれば分単位のビルド時間がかかって、かなりの負担となっていました。

Webpackに乗り換えた結果

Webpackに乗り換える前にCoffeeScriptは捨てていて、ふつうのJavaScriptとRiot.jsだけになっていたので、Webpackにuglifyjs-webpack-pluginriot-tag-loaderを足して、そしてRiotのタグもJavaScriptに変換してからBrowserifyしていたものをそのまま使うためにresolve.extensions.tagも追加するようにしてビルドプロセスを組み立てたところ、ビルドは数秒で片付くようになり、Watchしてのビルドも一瞬で片付くなど、だいぶ気持ちよく処理できるようになりました。

結論

やっぱり、速さは魅力。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?