dev.kokushinスマートフォン用の表示で見るdev.kokushinHTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。この広告は、90日以上更新していないブログに表示しています。JavaScriptそろそろ「webpack」触ってみようと思い、チュートリアルを見ながら試してみました。たくさんのモジュール群を最後にキュッとビルドするときの快感がやばいっすね。説明すると、「開発時はJSファイル等を分割して管理しておいて、リリースする際に“良い感じ”にまとめて結合させちゃうツール」です。ビルドツールと呼ばれているものですね。「gulp」などのタスクランナーと組み合わせて、最後のリリース段階で使うことが多いみたいですが、もちろん単体でも動作します。基本的なことを知るために今回は「webpack」単体で動かしてみます。参考チュートリアルqiita.comすっごく分かりやすいので、手順はこちらを見てください。この記事では実行ログと初心者俺氏がつまづいた点だけまとめております。実行ログを見て行きましょう。-gwebpackコマンドを叩けるようにグローバルインストールしておきます。--save-dev以上で「webpack」の準備は完了です。モジュール作成〜ビルドまででは実際に「webpack」を使ってJSのモジュール化からビルドまでの一連の流れをやってみましょう。モジュールの作成まずは「print.js」というファイル名でモジュールを作成します。msg);};引数で受け取った文字列を出力するだけのシンプルなコードです。module.exportsを使用することでモジュールとして読み込めるようになります。先ほど作成したモジュールを読み込ませ、実行するためのエントリーポイントとなる「main.js」を作ります。World!」と出力させるようにします。実行結果を確認するためにindex.htmlを作成しましょう。src="bundle.js"></script></body></html>bundle.jsの記述をお忘れなく。このファイルは、ビルドすることで「webpack」が自動生成してくれる「全てのJSがぎゅっと詰まったファイル」です。ビルド!いよいよ待ちに待ったビルドです。bundle.jsすべてのJSを管理している「main.js」を、実行できる形として「bundle.js」へ出力します。modules無事ビルドされたことが確認できたら、index.htmlをブラウザで開いてみましょう。Wolrd!」と出ていれば成功です。このように、最初はモジュールごとにJSを管理しておき最後にぎゅっとまとめて一つのファイルとして簡単に出力することが可能です。ビルド時にエラーが出るビルド時にエラーが出る場合は、ファイルのパスを「./」や「/」から書きなおしてみましょう。正常にビルド出来ます。webpack」コマンドだけでビルドを実行することが出来ます。}};「webpack.config.js」という名前で保存しましょう。感想とかJSが多くなり管理が雑になりがちなWebアプリケーション案件はもちろん、普通のウェブサイト制作でも十分に使えそうなツールですね。個人的には、たくさんあるファイル群をひとまとめに出来る時の快感が非常に良いので(謎)、積極的に使っていきたいと思います。Socket.ioでチャットアプリをつくってみるメモ忘れないうちに「Socket.io」の使い方をメモ。CSS好きなエンジニア。月別アーカイブはてなブログをはじめよう!kokushinさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。