フロントエンド開発で人気のwebpackとは

2018年10月5日開発webpack

サーバサイド側の開発より現在はほとんどフロントエンド側の開発になっております。これまでは、特に何も気にせずにhtmlでビューの部分の構成を書き、動的な部分が必要な時にJavaScriptを使って機能を実装する。ビューのデザインを整えるためにcssやlessなどを使って作ることがメインでした。今回は、ライブラリを導入することにしたので、npmを使ってインストールすることにしました。しかし、uncaught referenceerror jQuery is not defined のようなエラーが出て、動作しませんでした。jQueryが定義されていないということで、jQueryに関してはwebpackで動かしていたようで、これまであまり意識せずに使っていたので、調べてみることにしました。

webpackとは

webpackとは、JavaScriptやCSSなどのwebコンテンツとなるファイルをバンドルという一つのファイルに最適な形で変換するためのツールのことである。また、必要なリソースの依存関係を解決するという機能もあります。

インストール

以下のコマンドを実行することで現在のディレクトリにインストールできます

npm install --save-dev webpack

package.json内にバージョンの管理されたwebpackの記述が追加されていると思います。

webpack.config.js

ビルドするファイルやビルド後のファイル名等を設定することができる。

module.exports = {
entry: "./test.js", #変換前ファイル
output: {
path: "./", #返還後のファイルの置くパス
filename: "made.js" #ファイル名

webpackというコマンドを実行することで、ビルドされます。

まとめ

まだ調べて足りていな部分がたくさんありそうですので、今後webpackについて更新していければと思っています。